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 之列表渲染及条件渲染的更多相关文章

  1. vue.js选择if(条件渲染)详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  2. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  3. Vue入门系列(三)之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  5. 微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)

    目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...

  6. Vue知识整理10:条件渲染(v-if v-show)

    在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.

  7. Vue对Html标签应用条件渲染

    我的需求 在flag属性为true时 渲染标签的html为 <input :data-val-required="不能为空"/> 在flag属性为false时 渲染标签 ...

  8. Vue.js 系列教程 1:渲染,指令,事件

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...

  9. CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率

    CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率 当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...

随机推荐

  1. C的xml编程-libxml2

    这里主要讲述libxml2在linux下的使用. (以下内容除了linux下的安装步骤是自己写的,其余均出自http://www.blogjava.net/wxb_nudt/archive/2007/ ...

  2. 常用的ES6语法

    1. let.const 和 block 作用域 let 允许创建块级作用域,ES6 推荐在函数中使用 let 定义变量,而非 var: var a = 2; { let a = 3; console ...

  3. Win 无法安装 python 包

    Win 上使用 pip install 安装出错 使用 wheel 安装 pip install wheel 下载 编译包 http://www.lfd.uci.edu/~gohlke/pythonl ...

  4. 回数是指从左向右读和从右向左读都是一样的数,例如 12321 , 909 。请利用 filter() 滤掉非回数

    不管在什么地方,什么时候,学习是快速提升自己的能力的一种体现!!!!!!!!!!! 最近一段时间学习了廖雪峰老师学的Python学习资料,给自己的帮助很大,同时也学到的了很多,今天做了一道练习题,对于 ...

  5. Mysql--子查询、分页查询、联合查询

    一. 子查询的定义 出现在其他语句中的select语句,称为子查询或者内查询,外部的查询语句称为主查询或者外查询,子查询可以包含普通select可以包含的任何语句. 外部查询:select.inser ...

  6. nginx安装与部署

    1:安装工具包 wget.vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc g ...

  7. eclipse中使用git上传项目

    eclipse中使用git上传项目 先需要上传到本地仓库 先找到此选项打钩 再如下 再添加的属性则可以自动填充邮箱和密码 之后 右键选择import 点击找到git 选中 下一步  如果没有找到git ...

  8. 二 python并发编程之多进程-重点

    一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...

  9. spark实战之网站日志分析

    前面一篇应该算是比较详细的介绍了spark的基础知识,在了解了一些spark的知识之后相必大家对spark应该不算陌生了吧!如果你之前写过MapReduce,现在对spark也很熟悉的话我想你再也不想 ...

  10. A1082 Read Number in Chinese (25)(25 分)

    A1082 Read Number in Chinese (25)(25 分) Given an integer with no more than 9 digits, you are suppose ...