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

时间 2019-11-18

标签 vue 入门系列列表渲染条件实战繁體版

原文原文链接

3.1. 条件渲染

有时候咱们要根据数据的状况，决定标签是否进行显示或者有其余动做。最多见的就是，表格渲染的时候，若是表格没有数据，就显示无数据。若是有数据就显示表格数据。 Vue帮咱们提供了一个v-if的指令，帮助咱们完成判断的模板处理。html

<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指令。vue

3.2. 列表渲染

3.2.1. 基本v-for循环渲染标签

模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个v-for指令。基本的用法相似于foreach的用法。仍是看例子最直接，上代码：git

<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标签呢？若是还有生成其余的标签呢？github

Vue给咱们提供了template标签，供咱们用于v-for循环中进行处理。数组

上代码喽：app

<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之检测部分函数，检测的函数执行时才会触发视图更新。这些方法以下：ide

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开发基础的没有什么难度。关键是多写几个案例就会详细通了。spa

Github地址：源码下载
其余详情请参考：http://aicoder.com/vue/preview/all.htmlcode