Vue指令之v-for——迭代数组、迭代对象中的属性、迭代数字||v-for循环中key属性的使用
生活随笔
收集整理的這篇文章主要介紹了
Vue指令之v-for——迭代数组、迭代对象中的属性、迭代数字||v-for循环中key属性的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
v-for循環普通數組
v-for循環對象數組?
v-for循環對象?
v-for迭代數字?
v-for循環中key屬性的使用
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- 注意： v-for 循環的時候，key 屬性只能使用 number獲取string --><!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 --><!-- 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字符串/數字 類型 :key 值 --><p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p></div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',list: [{ id: 1, name: '李斯' },{ id: 2, name: '嬴政' },{ id: 3, name: '趙高' },{ id: 4, name: '韓非' },{ id: 5, name: '荀子' }]},methods: {add() { // 添加方法this.list.unshift({ id: this.id, name: this.name })}}});</script> </body></html>總結
以上是生活随笔為你收集整理的Vue指令之v-for——迭代数组、迭代对象中的属性、迭代数字||v-for循环中key属性的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在Vue中使用样式
- 下一篇： Vue指令之v-on的缩写和事件修饰符|