Vue的列表渲染博客

最新推荐文章于 2023-02-02 17:14:00 发布

insignificant555

最新推荐文章于 2023-02-02 17:14:00 发布

阅读量1.1k

点赞数

文章标签：其他

本文链接：https://blog.csdn.net/qq_66351622/article/details/124483103

版权

学习目标：

Vue框架学习

学习内容：

Vue中列表的渲染

学习产出：

技术笔记
网页博客
vue-列表渲染(v-for 详细)
v-for
1、数组
用 v-for 指令基于一个数组来渲染一个列表。
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key属性。
由于JavaScript的限制，Vue 不能检测以下变动的数组：用以下七个方法改变或者替换引用，是页面值替换渲染；
1.pop() 2.push() 3.shift() 4.unshift() 5.reverse() 6.sort() 7.splice()
“替换数组”
变更方法，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。也就是把原来指向的引用给改变了，即改变了引用就能触发视图的更新：
测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 列表的渲染</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-for="(item,index) of list">
                {{item}}--{{index}}
            </div>
        </div>

        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    list:[
                        "Moon",
                        "Halo",
                        "Night",
                        "Glow"
                    ]
                }
            })
        </script>
    </body>
</html>

2、对象
也可以用 v-for 来遍历一个对象（对象是个键值对），更改对象的值，触发视图更新，若添加一个新的，就不能更新视图了（对象中是有的，只是没有渲染到视图中），由于JavaScript的限制，Vue 不能检测对象属性的添加或删除：所以更新视图渲染
1.同数组，给对象一个新的引用的指向，视图可以更新：
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 列表的渲染</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-for="item of userNameInfo">
                {{item}}
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                   userNameInfo:{
                       name:"Yu Me",
                       age:"17",
                       like:"tsuki"
                   }
                }
            })
        </script>
    </body>
</html>

insignificant555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的列表渲染博客

学习目标： Vue框架学习学习内容：Vue中列表的渲染学习产出：技术笔记网页博客vue-列表渲染(v-for 详细)v-for1、数组用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key属性。由于JavaScript的限制，Vue 不能检测以下变动的数组
复制链接

扫一扫