Vue入门（三）——条件渲染与列表渲染

2017-07-27 本文已影响447人零和幺

vue.png

一、条件渲染

有时候，我们要根据数据的情况，决定标签是否进行显示，或者是否有其他动作。最常见的就是在表格渲染的时候，如果表格没有数据，就显示无数据；如果有数据，就显示表格数据。

为了让我们更方便地完成判断，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>

除此之外，Vue中还提供了一个与v-if类似的指令v-show。它们的功能大体相似，唯一的区别在于：带有v-show的元素始终会被渲染并保留在DOM中。所以，引用Vue文档上的话来说，就是：

v-if 有更高的切换开销，而 v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if较好。

此外，还需要被注意的一点是：v-else元素必须紧跟v-if或v-else-if元素的后面，否则不会被识别。

二、列表渲染

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': 'Jack', 'age': 18, 'address': 'New York'},
      {'name': 'Jennifer', 'age': 22, 'address': 'LA'},
      {'name': 'Jenny', 'age': 25, 'address': 'Boston'}
     ]
    }
  });
</script>

其中item代表数组中的每一项，这个名字可以随便起；而userList就是你要遍历的数组。是不是很简单？

2、Template循环渲染多标签

上面的例子演示的是，每次循环输出一个<td></td>标签。如果我们希望每次循环生成两个<td></td>标签呢？如果还要生成其他的标签呢？

此时，Vue给我们提供了<template>标签，供我们处理以上的情况。官方文档中的例子。

<ul>
  <!-- 通过template标签，可以一次循环，输出两个li标签 -->
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

三、表格渲染综合案例

下面是一个使用了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 border="1" cellspacing="0" cellpadding="10">
        <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': '张三', 'age': 18, 'address': '女厕所'});
  }, 1000);
</script>
</body>
</html>

会了上面的例子，条件渲染和列表渲染就没有什么问题了。

其实列表的使用本质还是JavaScript的衍生使用，对于有JS开发基础的童鞋来说，没有什么难度。关键是多写几个案例，这样就可以融会贯通了。

下一篇，会探讨Vue中的事件绑定处理，敬请期待。