7 列表渲染（v-for）

v-for
遍历数组(列表)：<tr v-for="(book,index) in book_list"> # book是循环到的对象，index是数组的索引
对象(字典)：<p v-for="(value,key) in person">{{key}}是：{{value}}</p># value是字典的value值，key是字典的key值，注意是跟正常的相反，如果只取一个值，就是value值
数字：<p v-for="i in 5">循环到第{{i}}次了</p> # 从1开始到5

字符串：<p v-for="i in 'asfdasdsdaf'">{{i}}</p>

一、列表渲染

 v-for遍历数组(列表)、对象(字典)、数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div class="app">

    <button @click="handleClick">刷新购物车</button>

    <table border="1">
        <tr>
            <td>顺序</td>
            <td>图书名字</td>
            <td>价格</td>
            <td>出版社</td>
        </tr>
        <tr v-for="(book,index) in book_list">
            <td>{{index+1}}</td>
            <td>{{book.name}}</td>
            <td>{{book.price}}</td>
            <td>{{book.publish}}</td>
        </tr>


    </table>


    <hr>
    <h2>循环对象</h2>
    <p v-for="(value,key) in person">{{key}}是：{{value}}</p>

    <hr>
    <h2>循环数字</h2>
    <p v-for="i in 5">循环到第{{ i}}次了</p>
    <hr>
    <h2>循环字符串</h2>
    <p v-for="i in 'asfdasdsdaf'">{{i}}</p>


</div>

</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            book_list: [],
            person: {name: '彭于晏', age: 34, height: 169}
        },
        methods: {
            handleClick() {

                this.book_list = [{name: '水浒传', price: 100, publish: '北京出版社'},
                    {name: '西游记', price: 12, publish: '北京出版社'},
                    {name: '三国演义', price: 55, publish: '南京出版社'},
                    {name: '封神榜', price: 99, publish: '上海出版社'},
                ]
            }
        }

    })
</script>
</html>

 

 

 

 

 二、key值的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

  • 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
  • 页面更新之后，会加速DOM的替换（渲染）
  • :key="变量"

  • 三、数组更新与检测

  • 可以检测到变动的数组操作：
  • push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转
    检测不到变动的数组操作：有的时候，数组（对象）变了，但是页面没变，作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
  • filter()：过滤
concat()：追加另一个数组
slice()：
map()：

原因：

作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
    解决方法：
  • // 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(vm.arrayList, 0, 'Darker')

     

  • 案例：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div class="app">

    <button @click="handleClick">点我，改0位置的值</button>

    <p v-for="item in l1">元素为：{{item}}</p>


</div>

</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            l1: [1, 2, 3],

        },
        methods: {
            handleClick() {
                // this.l1.push(4)   页面内容会变，但是有的数组变了，页面不会变
                // this.l1=this.l1.concat(this.l2)  // 不会更改原数组，返回一个数组
                //  console.log(this.l1)
                // this.l1[0] = 999     //不会改变
                Vue.set(this.l1,0,999) // 触发更新，触发页面的变化
            }
        }


    })
</script>
</html>
    当点击按钮时，触发this.l1[0] = 999，原值改变，但是页面没有变化
      
      Vue.set(this.l1,0,999)

     

     

     

     



posted @ 2022-02-10 17:34  甜甜de微笑  阅读(189)  评论(0)  编辑  收藏  举报