![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/cc8d9b357f95470b8450cde4b4f3ed96.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
通过前两天的学习，我们知道了vue里面常用的两个指令和一些基础语法，今天的文章中，会通过一个TodoList的小功能带大家了解循环和双向绑定。
【Vue3从零开始-第一章】1-1 Hello world和计数器
v-for循环
- 当页面上需要用
ul下面的li标签来渲染一个数组时，我们是不是会这样写
<ul> <li>hello</li> <li>world</li> <li>dell</li> <li>lee</li> </ul> 复制代码
但是这是在数据少的情况下可以复制粘贴标签，修改内容就可以在页面上渲染出来了，那么如果数组里面有十几个，甚至几十个的时候呢？我们就要用到循环了，在vue中如何使用循环呢？就要看看下面的例子了！
我们首先把之前文章中的代码改造一下
Vue.createApp({ data(){ return { list: ['hello', 'world', 'dell', 'lee'] } }, template: ` <ul> <li v-for="item of list">{{item}}</li> </ul> ` }).mount('#root'); 复制代码
- 通过
v-for指令去循环list中的数据，将list中的每一项数据循环放到item中，并渲染到页面上
在循环的时候，我们也可以在item旁边加上一个index，这个index表示的是循环到第几项的下标。
<li v-for="(item, index) of list">{{item}} - {{index}}</li> 复制代码
数据绑定
应用场景
首先我们需要清空data中的list的值，给一个空的数组，然后我们通过定义一个按钮，来触发一个点击事件，点击一次就在handleAddItem方法中给list追加一个值。
代码
Vue.createApp({ data(){ return { list: [] } }, methods: { handleAddItem(){ this.list.push('hello') } }, template: ` <div> <button v-on:click="handleAddItem">增加</button> <ul> <li v-for="(item, index) of list">{{item}} - {{index}}</li> </ul> </div> ` }).mount('#root'); 复制代码
![5@1%GQ[{@]YY_3SAT4{57FO.png](https://ucc.alicdn.com/pic/developer-ecology/f215c9638b714a74ae63d680308304a3.png?x-oss-process=image/resize,w_1400/format,webp "5@1%GQ[{@]YY_3SAT4{57FO.png")
问题
通过上面的这个代码我们可以看到，添加的都是固定的一个值hello，那如果我们要做一个动态添加不同的值，要怎么办呢？这时候就需要用到双向数据绑定的功能了。
双向数据绑定
初步了解一下
首先我们在template中定义一个input输入框，在输入框下面输出input中的值
Vue.createApp({ data(){ return { inputValue: '' } }, template: ` <div> <input v-model="inputValue" /> <div>{{inputValue}}</div> </div> ` }).mount('#root'); 复制代码
- v-model：双向数据绑定指令，通过这个指令，可以将
v-model中的值和data中的inputValue进行绑定，做到同步更新。
一切都准备好了，那么我们就可以改造一下上面做的TodoList功能了，让输入框输入值之后，点击增加按钮触发点击事件，在页面上新增输入框中的值。
正式开始
Vue.createApp({ data(){ return { inputValue: '', list: [] } }, methods: { handleAddItem(){ this.list.push(this.inputValue) } }, template: ` <div> <input v-model="inputValue" /> <button v-on:click="handleAddItem">增加</button> <ul> <li v-for="item of list">{{item}}</li> </ul> </div> ` }).mount('#root'); 复制代码
- 在
handleAddItem方法中，我们对list追加了data中定义的inputValue的值，而这个值是和input中的v-model绑定在一起的。
但是，我们发现每次增加之后，输入框的值还是存在，没有在新增之后清空输入框，那么我们怎么能够在增加之后清空输入框呢？
input输入框中的v-model是和data里面的inputValue的值进行双向数据绑定的，那么我们对inputValue进行清空的时候，是不是也就对input输入框进行清空了呢！ 改造一下handleAddItem方法
handleAddItem(){ this.list.push(this.inputValue) this.inputValue = '' } 复制代码
- 在追加数据完成之后，将
inputValue的值清空
总结
通过TodoList小功能一起了解到了vue里面的v-for循环指令和v-model双向数据绑定指令，当然这只是vue中的部分常用指令，后面还会用更多的小功能一起学习更多的指令。
