首页 > 代码库 > 【03】Vue 之列表渲染及条件渲染
【03】Vue 之列表渲染及条件渲染
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
【03】Vue 之列表渲染及条件渲染
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。