列表渲染的相关指令
一 概念
- v-for：循环渲染列表
```html
<div id="app">
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
<button @click='click'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['张三', '李四', '王五']
}，
methods: {
click: function () {
this.items.splice(1, 1, '李大大');
this.items.pop();
this.items.push('赵六')
}
}
})
</script>
```
- 遍历数组
```html
// items: ['张三', '李四', '王五']
// 值
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
// 值, 索引
<ul>
<li v-for='(item, index) in items'>{{ index }} - {{ item }}</li>
</ul>
```
- 遍历对象
```html
// {'name': '张三', 'age': 18, 'sex': '男'}
// 值
<div v-for="value in object">
{{ value }}
</div>
// 值, 键
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
// 值, 键, 索引
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
```
- 复杂数据渲染
```html
// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
<div>
<div>{{ items[0].name }}</div>
<div>{{ items[1].age }}</div>
<div>{{ items[2].sex }}</div>
</div>
```二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<div id="app">
<h1>{{ msg }}</h1>
<!-- v-for="item in items" -->
<!-- 遍历的对象: 数组[] 对象(字典){} -->
<ul>
<li>{{ list[0] }}</li>
<li>{{ list[1] }}</li>
<li>{{ list[2] }}</li>
<li>{{ list[3] }}</li>
<li>{{ list[4] }}</li>
</ul>
<!-- n为遍历的元素值 -->
<ul>
<li v-for="n in list">{{ n }}</li>
</ul>
<!-- 一般列表渲染需要建立缓存 -->
<!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
<!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
<ul>
<li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
<ul>
<li>{{ dic['name'] }}</li>
<li>{{ dic.age }}</li>
<li>{{ dic.gender }}</li>
</ul>
<!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
<ul>
<li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
<!-- 遍历的嵌套 -->
<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
<div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }} </div>
</div>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "列表渲染",
list: [1, 2, 3, 4, 5],
dic: {
name: '小VV',
age: 88888,
gender: '神'
},
persons: [
{name: "zero", age: 8},
{name: "egon", age: 78},
{name: "liuXX", age: 77},
{name: "yXX", age: 38}
]
}
})
</script>
</html>
