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. 网络Socket编程TCP协议例子

    1.单线程TCP服务端 public class TcpChatServer { private Integer port=8000; private ServerSocket serverSocke ...

  2. Bash控制结构

    1. if-else语句 #!/bin/bash #if ... fi 语句: if [ $a != $b ] then echo "a != b" fi #if ... else ...

  3. Java模式—简单工厂模式

    简单工厂模式:是由一个工厂对象决定创建出哪一种产品类的实例,简单工厂模式是工厂模式家族中最简单实用的模式. 目的:为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. ...

  4. 【从0到1学Web前端】CSS定位问题二（float和display的使用） 分类： HTML+CSS 2015-05-28 22:03 812人阅读 评论(1) 收藏

    display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...

  5. [java初探05]__数组的简单认识及Arrays类的常用方法

    数组是具有相同数据类型的一组数据的集合.在程序设计中,这样的集合称之为数组.数组的每个元素都具有相同的数据类型,在Java中数组也被看为一个对象. 在里,了解了数组的定义之后, 我们知道了,数组并不是 ...

  6. Percona XtraDB Cluster

    简介 Percona XtraDB Cluster是MySQL高可用性和可扩展性的解决方案,Percona XtraDB Cluster提供的特性如下: 1.同步复制,事务要么在所有节点提交或不提交. ...

  7. git 分支 branch 操作

    创建分支 git branch test: 基于当前commit创建test分支..git/HEAD 文件中记录了当前分支名字. 删除分支 git branch -d test:删除本地test分支 ...

  8. python3.X出现关于模块（i18n）的不能使用的解决方法

    今天在看python编程从入门到实践的时候,遇到了    如下问题 ModuleNotFoundError: No module named 'pygal.i18n' 然后查找文献找到一个网友 的解决 ...

  9. No caching ——无缓存工具

    No caching ——无缓存工具 无缓存工具阻止客户端应用程序(如Web浏览器)缓存任何资源,因此,请求总是发送到远程站点,所以我们总能看到最新版本. 适用场景 开发每次新部署了一版环境,说解决了 ...

  10. c++/c 获取cpp文件行号跟文件名

    编译器内置宏: 先介绍几个编译器内置的宏定义,这些宏定义不仅可以帮助我们完成跨平台的源码编写,灵活使用也可以巧妙地帮我们输出非常有用的调试信息. ANSI C标准中有几个标准预定义宏(也是常用的): ...