3.Vue列表渲染及条件渲染

Vue
Vue

3.1 条件渲染 v-if

  • 根据判断布尔值，处理模板
  • 用法：<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
  • v-if指令可以根据数据绑定的情况进行插入标签或者移除标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

3.2 列表渲染

v-for循环渲染标签

  • 模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个v-for指令。基本的用法类似于foreach的用法
    注：如果我们想要循环两标签，Vue给我们提供了template标签，供我们用于v-for循环中进行处理。
  • 用法：<li v-for="item in list"> </li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
  <table>
    <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': '1', 'age': 11, 'address': '北京'},
      {'name': '2', 'age': 22, 'address': '上海'},
      {'name': '3', 'age': 33, 'address': '天津'}
     ]
    }
  });
</script>

v-for对应数组更新

  • Vue的机制就是检测数据的变化，自动跟新HTML。数组的变化，Vue之检测部分函数，检测的函数执行时才会触发视图更新
  • 例如一些数组方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

Template循环渲染多标签

  • 上面的例子，我们演示的是 每次循环输出一个tr标签。如果我们希望每次循环生成两个tr标签呢？如果还有生成其他的标签呢？
1
2
3
4
5
6
7
<ul>
  <!-- 通过template标签，可以一次循环，输出两个li标签 -->
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>
分享到