10_列表渲染
基本使用
使用
v-for可以循环渲染数据，如下，从persons中拿数据循环渲染到li标签中展示
<body>
<div id="app">
<ul>
<!-- v-for="[数据每一项] in [数据]" -->
<li v-for="item in persons" :key=item.id>{{ item.name }} - {{ item.age }}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
persons: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 19 },
{ id: 3, name: '王五', age: 21 },
{ id: 4, name: '赵六', age: 20 },
],
};
},
});
</script>
</body>
v-for中第二个参数
<!-- v-for可以配置第二个参数，第二个参数为数组索引值 -->
<li v-for="(item, index) in persons">{{ item }} - {{ index }}</li>
v-for中的key
使用唯一的值作为key，提高页面渲染的效率（当数据发生变化时，vue会根据key值对新虚拟DOM和旧虚拟DOM对比，把没变的内容进行复用，若变了则生成新的真实DOM添加到页面）
<li v-for="(item, index) in persons" :key="item.id">{{ item.name }} - {{ item.age }} - {{ index }}</li>
遍历对象
第一个参数是值，第二个参数是键
<li v-for="(v, k) in car" :key="k">{{ k }} -- {{ v }}</li>
遍历字符串
<li v-for="(char, index) in name" :key="index">{{ char }} -- {{ index }}</li>
遍历次数
<li v-for="(number, index) in 5" :key="index">{{ number }} -- {{ index }}</li>
阅读剩余
THE END
