今天小编和大家一起在Vue的路上探索。实现的功能如下。现在在页面渲染默认数组，然后点击按钮将文本框中的数据添加到列表中，效果如下。源码是这样的。下面我将结合代码中的注释来讲解核心代码Vue.createApp({data(){return{list:['item1','item2','item3','item4'],//绑定列表ofv-forloopsinputVal:""//绑定文本框的内容}},methods:{handleAddItem(){//绑定按钮的点击事件this.list.push(this.inputVal)//修改绑定数据，在数组中添加数据this.inputVal=''//重新赋值绑定值，清除文本框中的值}},template:`
//通过v-model绑定表单的值元素，也就是常说的数据双向绑定Add
`}).mount('#root')之前有过基础或者细心的会发现那我用v-for的时候，后面用到关键字了，所以对于v-for，虽然官方文档给了，但是of和in有什么区别呢？在原生js中，for循环，可以使用关键字in和for来循环，结果是不一样的，像这样letarr=[{name:'lilei',age:12},{name:'hanmeimei',age:20}]for(letitemofarr){console.log(item)//{{name:'lilei',age:12}{name:'hanmeimei',age:20}}for(letkeyinarr){console.log(item)//01}小编查询了一些资料后得出结论，遍历数组时推荐使用of，语法为(item,index)。遍历对象时，推荐使用in，语法为(item,name,index)下面是示例DATA：list:[{name:'1'},{name:'2'},{name:'3'},]html:- //v-for和上一篇中的v-if类似，都叫指令//v-for作为循环fordata//v-for可以接受两个参数，第一个是数组中的元素，第二个是下标//变量that可以通过in和of这两个关键字进行绑定//不建议在同一个元素上使用v-if和v-for。如果一定要用，可以在外面嵌套div或者其他元素//根据官方文档，同时使用时，v-for的优先级会高于v-if