Vue中的列表渲染_html-js-css

概述<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6

<!DOCTYPE HTML> <HTML> <head> <Title></Title> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <script src="./vue.Js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.Js"></script> --> </head> <body> <div ID="app"> <div v-for="(item,myIndex) of List"> {{item}}---{{myIndex}} </div> //一般来说，为了提高循环显示的性能，我们会给每个循环项加上key值(像下面这样加上:key="index"还是比较费性能的。毕竟频繁 *** 作dom的时候还是会有些耗性能，可能让vue没法充分复用节点，所以不建议用index做为:key值)<br> <div v-for="(item,index) of List" :key="index"> {{item}}---{{index}} </div> //那用什么？一般后端向前端返回数据，会带上ID之类的唯一标识符<br> <div v-for="(item,index) of ListUnique" :key="item.ID"> {{item}}---{{index}}---{{item.ID}} </div> <b >(怎样让性能最高呢？:key值要唯一，同时不能使用index作为它的值)</b><br> //如果不想让最外面的div也显示出来，可以将该div换成template：<br> <div v-for="(item,index) of ListUnique" :key="item.ID"> <div>{{item}}---{{index}}---{{item.ID}}</div> <span>{{item.ID}}</span> </div> <template v-for="(item,index) of ListUnique" :key="item.ID"> <div>{{item}}---{{index}}---{{item.ID}}</div> <span>{{item.ID}}</span> </template> //除了数组，对象也可以做循环：<br> <div v-for="(item,key,index) of userInfo">{{key}}:{{item}},{{index}}</div> </div> <script type="text/JavaScript"> var vm = new Vue({ el: "#app",data: { List: ["hello","world","what","the","fuck"],ListUnique: [ { ID: "001",text: "aaa" },{ ID: "002",text: "bbb" },{ ID: "003",text: "ccc" } ],userInfo: { name: "阿三",age: 18,gender: "male",salary: 100000 } } }) </script> </body> </HTML>

这种方式加内容会马上渲染出来：

而这样却不会渲染，但其实是加进数组了的。这是为啥捏？使用vue修改数组内容的时候不能用下标的方式，只能通过vue提供的几个数组变异方法来 *** 作数组才能实现数组变化页面也跟着变，一共有七个方法，分别是push、pop、shift、unshift、reserve、splice、sort：

从下标是1的数组开始处理，删除1条，增加指定的一条：

还可以通过引用的改变来实现(Js的数组是引用类型)：

改变数组的值(废话，当然是值变页面也变)的另外两个方法：

(分别将下标为(下标从0开始)1的元素的值改为5，下标为2的元素的值改为10)

改变对象可以用引用的方式：

除了引用的方式改变对象的值(当然，这篇说的全是数据变，页面也变啊)，还可以用set方法：

通过实例方法也可以：

总结

以上是内存溢出为你收集整理的Vue中的列表渲染全部内容，希望文章能够帮你解决Vue中的列表渲染所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。