乐趣区

关于vue.js:Vue3实现列表循环

jiezi

明天小编和大家一起在 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->0
25->age->1
1909->class->2
3->grade->3

soho->name->0
25->age->1
1909->class->2
3->grade->3

参考文章：

https://vue3js.cn/

https://www.cnblogs.com/Scoob…
大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈

退出移动版