03Vue 之列表渲染及条件渲染
Posted yezixuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了03Vue 之列表渲染及条件渲染相关的知识，希望对你有一定的参考价值。
3.1. 条件渲染
有时候我们要根据数据的情况，决定标签是否进行显示或者有其他动作。最常见的就是，表格渲染的时候，如果表格没有数据，就显示无数据。如果有数据就显示表格数据。 Vue帮我们提供了一个v-if的指令，帮助我们完成判断的模板处理。
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<!-- 当ok为true的时候，输出： Yes， 否则输出： No -->
<script>
var app = new Vue({
el: \'#app\',
data: {
ok: true // true,返回：Yes， false=> No
}
});
</script>
v-if指令可以根据数据绑定的情况进行插入标签或者移除标签。 当然，如果熟悉js的都清楚，有if，肯定会有else。 Vue提供的是 v-else指令。
3.2. 列表渲染
3.2.1. 基本v-for循环渲染标签
模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个v-for指令。基本的用法类似于foreach的用法。还是看例子最直接，上代码：
<div id="app">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<!-- 每次for循环，都会创建一个tr标签。item是遍历的元素。 -->
<tr v-for="item in UserList" >
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = new Vue({
el: \'#app\',
data: {
UserList: [
{\'name\': \'malun\', \'age\': 18, \'address\': \'北京黑地下室\'},
{\'name\': \'flydragon\', \'age\': 22, \'address\': \'厦门的很多热的地方\'},
{\'name\': \'temp\', \'age\': 25, \'address\': \'东北松花江上\'}
]
}
});
</script>
3.2.2. Template循环渲染多标签
上面的例子，我们演示的是 每次循环输出一个tr标签。如果我们希望每次循环生成两个tr标签呢？如果还有生成其他的标签呢？
Vue给我们提供了template标签，供我们用于v-for循环中进行处理。
上代码喽：
<ul>
<!-- 通过template标签，可以一次循环，输出两个li标签 -->
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
3.2.3. 关于v-for对应的数组的更新
由于Vue的机制就是检测数据的变化，自动跟新html。数组的变化，Vue之检测部分函数，检测的函数执行时才会触发视图更新。这些方法如下：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
3.3. 表格显示的综合案例
下面是一个综合的案例，每秒钟往表格中添加一条数据。 本案例综合使用了v-if 和 v-for循环综合案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之动态显示表格</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<!-- 如果列表有数据，直接输出表格数据，没有数据提示用户没有数据 -->
<tbody v-if="UserList.length > 0">
<tr v-for="item in UserList" >
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
<tbody v-else>
<tr><td colspan="3">没有数据奥！</td></tr>
</tbody>
</table>
</div>
<script>
var app = new Vue({
el: \'#app\',
data: {
UserList: []
}
});
// 每秒钟插入一条数据。
setInterval(function () {
app.UserList.push({\'name\': \'malun\', \'age\': 18, \'address\': \'北京黑地下室\'});
}, 1000);
</script>
</body>
</html>
3.4. 总结列表和条件绑定
列表的使用其实本质还是js的衍生使用，对于有js开发基础的没有什么难度。关键是多写几个案例就会详细通了。
Github地址：源码下载
其他详情请参考：http://aicoder.com/vue/preview/all.html
转载地址：http://www.cnblogs.com/fly_dragon/p/6218703.html
以上是关于03Vue 之列表渲染及条件渲染的主要内容，如果未能解决你的问题，请参考以下文章