[30天 Vue学好学满 DAY10] v-for 列表渲染

v-for

基於数组、物件透过迭代、遍历对前端进行渲染。

item in items
items: 数据源
item: 元素别名
index: 当前索引
key: 追踪节点的唯一值(2.2.0+ 必须绑定):改变顺序时，确保重新渲染。
可用 of 代替 in

阵列应用

HTML

<li v-for="item in items" :key="item.id">
    {{ item.text }}
</li>

定义items

data() {
    return {
      items: [
        { id: "1", text: "text0" },
        { id: "2", text: "text1" },
        { id: "3", text: "text2" },
      ],
    };
},

渲染结果

测试item, index
微调HTML

<li v-for="(item, index) in items" :key="item.id" @click="logItem(item)">
    第 {{index}} 个为 {{ item.text }}
</li>

定义方法

methods: {
    logItem: function (obj) {
      console.log(obj); // 测试传出item
    },
},

**渲染结果 & 点击第一列 **

遍历物件的所有属性

调整前端HTML

<li v-for="value in items[0]" :key="value">
      {{ value }}
</li>

渲染结果

name属性名称

调整前端HTML

<li v-for="(value, name, index) in items[0]" :key="index">
       {{ index }}. {{ name }}: {{ value }}
</li>

渲染结果

常数

HTML加上

<li v-for="n in 10" :key="n">
    {{ n }}
</li>

渲染结果
同区块中相同key值可能造成错误

在指令中使用方法

HTML

<ul v-for="(set, index) in sets" :key="index">
    <li v-for="(n, index) in odd(set)" :key="index">{{ n }}</li>
</ul>

Data

sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]

方法: 过滤奇数

methods: {
    // 过滤奇数 
    odd: function (numbers) {
      return numbers.filter(function (number) {
        return number % 2 !== 0;
      });
    },
},

渲染结果
1 3 5 7 9

阵列更变方法

vue对於操作阵列的方法也可进行即时渲染，包含以下
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
可透过F12 进行测试

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://medium.com/pierceshih
https://cythilya.github.io/2017/04/27/vue-list-rendering/

感谢各路大神