Vue 响应式渲染 - 列表渲染

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue响应式渲染 - 列表渲染

列表渲染

列表渲染介绍

数组遍历

对象的遍历

动态绑定key

总结

列表渲染

列表渲染介绍

（1）v-for (特殊v-for="n in 10")

A.in

B.of

没有区别

（2）key:

跟踪每个节点的身份，从而重用和重新排序现有元素

理想的key值是每项都有的且唯一的id。data.id

（3）数组更新检测

A.使用以下方法操作数组，可以检测变动

push() pop() shift() unshift() splice() sort() reverse()

B.filter() concat()和slice() map() 新数组替换旧数组

C.不能检测以下变动的数组

vm.items[indexOfitem] = newValue

解决

(1)Vue.set(example1.items, indexOfitem, newValue)

(2)splice

数组遍历

使用数组格式的数据源进行列表渲染。

示例如下：

html 复制代码

<script src="../lib/vue.js"></script>
    <div id="box">
        <ul>
            <li v-for="item of datalist">
                {
  
  {item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item, index) of datalist">
                {
  
  {item}} -- {
  
  {index}}
            </li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el:'#box',
            data: {
                datalist:["11111", "2222", "3333"],
            }
        })
    </script>

效果如下：

对象的遍历

使用对象格式的数据源进行列表渲染。

示例如下：

html 复制代码

<script src="../lib/vue.js"></script>
    <div id="box">
        <ul>
            <li v-for="(item, index) in obj">
                {
  
  {item}} -- {
  
  {index}}
            </li>
        </ul>
        <ul>
            <li v-for="item in 10">
                {
  
  {item}}
            </li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el:'#box',
            data: {
              obj:{
                    name:"张三",
                    age:"20",
                    gender:"男"
                }
            }
        })
    </script>

效果如下：

动态绑定key

有一个唯一id属性，首先vue会根据列表创建虚拟dom，然后创建真实dom。

当列表修改后，vue会创建新的dom，然后通过用户设置的唯一id与原虚拟dom进行对比，

找不同，以最小的代价最后更新到真实dom树中。所以要设置合适的key。

示例如下：

html 复制代码

<ul>
    <li v-for="(item, index) in obj" :key="item.id">
        {
  
  {item}} -- {
  
  {index}}
    </li>
</ul>

总结

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue响应式渲染 - 列表渲染