vue.png
一、条件渲染
有时候，我们要根据数据的情况，决定标签是否进行显示，或者是否有其他动作。最常见的就是在表格渲染的时候，如果表格没有数据，就显示无数据；如果有数据，就显示表格数据。
为了让我们更方便地完成判断，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>
除此之外，Vue中还提供了一个与v-if类似的指令v-show。它们的功能大体相似，唯一的区别在于：带有v-show的元素始终会被渲染并保留在DOM中。所以，引用Vue文档上的话来说，就是：
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。
此外，还需要被注意的一点是：v-else元素必须紧跟v-if或v-else-if元素的后面，否则不会被识别。
二、列表渲染
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': 'Jack', 'age': 18, 'address': 'New York'},
{'name': 'Jennifer', 'age': 22, 'address': 'LA'},
{'name': 'Jenny', 'age': 25, 'address': 'Boston'}
]
}
});
</script>
其中item代表数组中的每一项，这个名字可以随便起；而userList就是你要遍历的数组。是不是很简单？
2、Template循环渲染多标签
上面的例子演示的是，每次循环输出一个<td></td>标签 。如果我们希望每次循环生成两个<td></td>标签呢？如果还要生成其他的标签呢？
此时，Vue给我们提供了<template>标签，供我们处理以上的情况。官方文档中的例子。
<ul>
<!-- 通过template标签，可以一次循环，输出两个li标签 -->
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
三、表格渲染综合案例
下面是一个使用了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 border="1" cellspacing="0" cellpadding="10">
<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': '张三', 'age': 18, 'address': '女厕所'});
}, 1000);
</script>
</body>
</html>
会了上面的例子，条件渲染和列表渲染就没有什么问题了。
其实列表的使用本质还是JavaScript的衍生使用，对于有JS开发基础的童鞋来说，没有什么难度。关键是多写几个案例，这样就可以融会贯通了。
下一篇，会探讨Vue中的事件绑定处理，敬请期待。
网友评论