【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 之列表渲染及条件渲染的更多相关文章
- vue.js选择if(条件渲染)详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- Vue入门系列(三)之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue 列表渲染及条件渲染实战
条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...
- 微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)
目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...
- Vue知识整理10:条件渲染(v-if v-show)
在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.
- Vue对Html标签应用条件渲染
我的需求 在flag属性为true时 渲染标签的html为 <input :data-val-required="不能为空"/> 在flag属性为false时 渲染标签 ...
- Vue.js 系列教程 1:渲染,指令,事件
原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...
- CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率 当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...
随机推荐
- MySQL 5.6常用参数配置及说明
[client] user = root password = Yong_110 [mysql] prompt = [\\u@\\p][\\d]>\\_ no-auto-rehash [mysq ...
- 从指定的view中截图 返回UIImage
-(UIImage *)getImageFromView:(UIView *)view{ UIGraphicsBeginImageContext(view.bounds.size); [view.la ...
- Vue入门之HelloWorld
对于新学习一门技术,一门语言比如JAVA.Python等都是从编写Hello World开始的,这样一来有益于初学者的人门,并给予初学者一定的信心,所以我也从HelloWorld开始讲起. 干货: 对 ...
- 生产环境LAMP搭建 - 基于 fastcgi
生产环境LAMP搭建 - 基于 fastcgi 由于在module模式,php只是已http的模块形式存在,无形中加重了http的服务负载,通常在企业架构中,使用fastcgi的模式,将所有的服务都设 ...
- 第二篇:ssh.invoke_shell() 切换root出现的新问题
接上一篇:按照上一篇的方式,在没有对ssh.invoke_shell()执行后的登录提示符进行判断的话,那边有部分机器就回因为返回为空导致程序卡死. 正常机器 ssh.recv(9999) 命令返 ...
- 用express框架实现反向代理
目前很多公司开发都是前后台分离开发,于是我用node起了一个服务,用node中的express框架实现了反向代理.(通俗易懂的讲就是我在我的电脑访问不到后台同事的电脑接口,这样做以后就可以在我本地访问 ...
- 无线Web开发
http://am-team.github.io/amg/dev-exp-doc.html
- 解决cmd目录下pip命令不存在的问题
解决cmd目录下pip命令不存在的问题 注:pip.exe程序在Python安装目录下的scripts中1.在cmd命令中输入: 先输入:python -m ensurepip 再输入:python ...
- HDU 1506 Largest Rectangle in a Histogram(单调栈、笛卡尔树)
题意:给定n个连续排列的矩形的高,矩形的宽都为1.问最大矩形覆盖. 例如:n = 7,h[i] = (2 1 4 5 1 3 3),最大覆盖为8. Sample Input 7 2 1 4 5 1 3 ...
- 笔记-python-lib-re
笔记-python-lib-re 1. re模块简介 re模块提供了与perl类似的正则匹配功能. 要搜索的模式和字符串都可以是Unicode字符串(str)以及8位字符串(bytes).但 ...