Vue中怎么实现列表渲染
短信预约 -IT技能 免费直播动态提醒
这期内容当中小编将会给大家带来有关Vue中怎么实现列表渲染，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script class="lazy" data-src="./vue.js"></script>
<!-- <script class="lazy" data-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中怎么实现列表渲染了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
