Vue官网：

https://cn.vuejs.org/v2/guide/forms.html#基础用法

【入门系列】

(一)  http://www.cnblogs.com/gdsblog/p/7804785.html

(二)   http://www.cnblogs.com/gdsblog/p/7804770.html

(三)   http://www.cnblogs.com/gdsblog/p/7804758.html

（四） http://www.cnblogs.com/gdsblog/p/7804758.html

（五） http://www.cnblogs.com/gdsblog/p/7804686.html

【本文转自】

　　http://www.cnblogs.com/fly_dragon

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

作者：FlyDragon

Vue入门系列（三）之Vue列表渲染及条件渲染实战的更多相关文章

  1. Vue入门笔记（二）--基础部分之条件渲染

    github地址:https://github.com/iTao9354/basicVue/tree/master/conditional%20rendering(demo01-03) 一.v-if ...

  2. vue 快速入门 系列 —— 初步认识 vue

    其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...

  3. mybatis入门系列三之类型转换器

    mybatis入门系列三之类型转换器 类型转换器介绍 mybatis作为一个ORM框架,要求java中的对象与数据库中的表记录应该对应 因此java类名-数据库表名,java类属性名-数据库表字段名, ...

  4. C# 互操作性入门系列(三)：平台调用中的数据封送处理

    好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...

  5. [转]C# 互操作性入门系列(三)：平台调用中的数据封送处理

    参考网址:https://www.cnblogs.com/FongLuo/p/4512738.html C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列( ...

  6. Excel VBA入门（三） 流程控制1－条件选择

    VBA中的流程控制分为两种,其一是条件结构式的,即根据条件判断的结果去选择性执行相应的语句(块):另一种是循环,即循环地执行语句(块).本节介绍第一种. 1. IF if 语句其实包含有几种形式: ① ...

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

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

  8. Vue入门系列（五）Vue实例详解与生命周期

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

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

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

随机推荐

  1. MVC3学习：利用mvc3+ajax检测用户是否被注册

    假设用户名是保存在表Users中.关系模式为Users(Uid,UserName,PassWord) 可先利用mvc自带的模板生成Create页面. 将填写用户名的地方,由原来的 <div cl ...

  2. (转)IHS配置安全漏洞： 支持不推荐使用的 SSL 版本、在降级的旧加密上填充 Oracle、检测到 RC4 密码套件、支持弱 SSL 密码套件、 重构 RSA 导出键（又称为 FREAK）

    原文:https://blog.csdn.net/lyd135364/article/details/52179426 都是由于ihs配置中支持不推荐使用的ssl版本和弱密码套件引起的. 只要在配置文 ...

  3. COM+时代的自动事务

    最近看公司的遗留项目代码,调试的时候发现经常报分布式事务错误,可是整个代码里没有看见开启过事务,于是开始研究,发现了这个.Net Framework1.1时代的产物. namespace Busine ...

  4. Installation failed with message...It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing.

    错误弹窗如图: Installation failed with message Failed to finalize session: INSTALL_FAILED_TEST_ONLY:instal ...

  5. Android分组子级的不同视图布局之BUG奇遇记

    Android分组子级的不同视图布局之BUG奇遇记 最近在使用按日期分类列表,二级条目可能不一样,于是就想到了ExpandableListView. ExpandableListView的布局显示分割 ...

  6. JavaScript -- Window-Blur

    -----030-Window-Blur.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  7. tomcat 配置文件server.xml 详解 Connector Engine Host Context

    目录 一 server.xml 1.1 server 配置 1.2 service 配置 1.3 Executor 1.4 Connector 配置 1.5 Engine 其他tocmat 文章 一 ...

  8. xshell 登陆堡垒机实现自动跳转

    1, 正常使用用户密码登录堡垒机并保存登陆配置 2, 配置登陆脚本 添加第一个: expect 为空send :ssh root@ip 添加第二个: expect root@ip's password ...

  9. Nhibernate + MySQL 类型映射

    用SQLyog工具创建表 然后用自动映射工具NHibernate Mapping Generator对表做自动映射,得到 这个是可视化界面,后面有对应的代码. using System; using ...

  10. 数据库字典查询，从EF工具操作中提取的

    用户表: SELECT [Project1].[C1] AS [C1] , [Project1].[CatalogName] AS [CatalogName] , [Project1].[Schema ...