明天小编和大家一起在Vue的路上摸索，要实现的性能是这样的。现将默认 数组内的渲染到页面上，而后点击按钮之后，将文本框内的数据增加到列表上，成果如下。
源码是这样的，上面我就联合代码中的正文来阐明一下外围的代码
Vue.createApp({ data(){ return { list:['item1','item2','item3','item4'], // 绑定v-for循环的列表 inputVal:"" // 绑定文本框的内容 } }, methods:{ handleAddItem(){ // 绑定按钮的点击事件 this.list.push(this.inputVal) // 批改绑定的数据，在数组中减少数据 this.inputVal = '' // 对绑定的值从新赋值，清空文本框内的值 } }, template:` <div> // 通过v-model绑定表单元素的值，也就是常说的数据双向绑定 <input v-model="inputVal" /> // v-on:click是绑定按钮的点击事件，能够通过@click语法糖来代替 <button v-on:click="handleAddItem">减少</button> <ul> // v-for和上一篇文章的v-if相似，都叫做指令 // v-for用作数据的循环 // v-for能够承受两个参数，第一个是数组中元素，第二个元素是下标 // 能够通过in和of两个关键字链接绑定的变量 // 不倡议将v-if和v-for用在同一个元素上。非要用能够在里面嵌套div或者其余元素 // 依据官网文档，同时应用的时候，v-for的优先级会高于v-if <li v-for="(item,index) of list">{{item}}</li> </ul> </div> `}).mount('#root')之前有过根底或者仔细的小伙伴会发现，小编在应用v-for的时候，前面用的是of关键字，那对于v-for来说，尽管官网文档给的是in，那么of和in有什么不一样呢？
在原生js中，对于循环来说，能够应用关键字in和for来循环，失去的后果是不一样的，就像这样
let arr = [ {name:'lilei',age:12}, {name:'hanmeimei',age:20}]for(let item of arr){ console.log(item) // {{name:'lilei',age:12} {name:'hanmeimei',age:20}}for(let key in arr){ console.log(item) // 0 1}小编在查问了一些材料后，失去这样的论断，遍历数组的时候，举荐应用of，语法为(item,index)。在遍历对象的时候，举荐应用in，语法为(item,name,index)上面是实例
DATA: list:[ {name:'1'}, {name:'2'}, {name:'3'}， ]html:<div class="items" v-for='(item,name,index) of list'>{{item}}->{{name}}->{{index}}</div><div class="items" v-for='(item,name,index) in list'>{{item}}->{{name}}->{{index}}</div>// 输入后果如下{ "name": "1" }->0->{ "name": "2" }->1->{ "name": "3" }->2->{ "name": "1" }->0->{ "name": "2" }->1->{ "name": "3" }->2->DATA: listObject:{ name:'soho', age:25, class:1909, grade:3 } html:<div class="items" v-for='(item,name,index) of listObject'>{{item}}->{{name}}->{{index}}</div><div class="items" v-for='(item,name,index) in listObject'>{{item}}->{{name}}->{{index}}</div>// 输入后果为soho->name->025->age->11909->class->23->grade->3soho->name->025->age->11909->class->23->grade->3参考文章：
https://vue3js.cn/
https://www.cnblogs.com/Scoob...
大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈