vue初学-列表渲染
2021-01-08 本文已影响0人
普通的一个程序员
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>列表渲染</title>
<script src="vue.js" type="text/javascript" ></script>
</head>
<body>
<div id="app">
<ul>
<!-- 可以使用 of代替in
字段顺序是不能变的 -->
<li v-for="item,index,key in items">
{{item.message}}_{{index}}
</li>
</ul>
<ul>
<li v-for="value,key, index in object">
{{key}}_{{value}}_{{index}}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{message: "list1"},
{message: "list2"},
{message: "list3"}
],
object: {
test1: "value1",
test2: "value2",
test3: "value3"
}
}
});
</script>
</html>
状态维护
v-for渲染元素列表时， 默认使用就地更新的策略。如果数据项的顺序改变，Vue不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，且确保他们在每个索引位置正确渲染。
为了给Vue的一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key attribute。
建议在使用v-for时提供key attribute,除非遍历输入的DOM内容非常简单，或者可以依赖默认行为以获取性能上的提上
