列表渲染
学习：v-for 以及key属性
我们可以使用 v-for 指令基于一个数组(对象、字符串)来渲染一个列表。v-for 指令的值需要使用 item in/of items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名
data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } } <li v-for="item in items"> {{ item.message }} </li>
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。
data() { return { parentMessage: 'Parent', items: [{ message: 'Foo' }, { message: 'Bar' }] } } <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li>
列表渲染需要添加key值，对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似
完整案例： 02/template/06_list.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表渲染</title> </head> <body> <div id="app"> <button @click="printBefore">前边插入</button> <button @click="printAfter">后边插入</button> <ul> <li v-for="item in arr"> {{ item }} </li> </ul> <!-- 给列表项可以添加 key 属性，key属性是唯一的 ，如果实在没有，可以通过 索引值的序号来充当 --> <ul> <li v-for="item in arr" :key="item"> {{ item }} </li> </ul> <ul> <li v-for="(item, index) in arr" :key="index"> {{ item }} </li> </ul> <ul> <li v-for="item of list" :key="item.brand"> {{ item.brand }} <ol> <li v-for="(itm, idx) of item.arr" :key="idx"> {{ itm }} </li> </ol> </li> </ul> </div> </body> <script src="../lib/vue.global.js"></script> <script> Vue.createApp({ data () { return { arr: ['aaa', 'bbb', 'ccc'], list: [ { brand: "宝马", arr: ['X5', 'X6'] }, { brand: "奥迪", arr: ['Q7', 'A8'] } ] } }, methods: { printBefore () { this.arr.unshift('000') }, printAfter () { this.arr.push('ddd') } } }).mount('#app') </script> </html>
v-if 与 v-for 同时存在于一个元素上，会发生什么？- 作业-验证
通过
审查元素得知：
vue3中，v-if的优先级高于v-for
vue2中，v-for的优先级高于v-if
