Vue.js笔记-条件渲染 列表渲染

v-if

1. <div id="demo">
2. <div v-if="abc">{{abc.a}}</div>    //该值为true时显示该标签，为false则不显示
3. </div>
4. <script>
5. var vm = new Vue({
6. el:"#demo",
7. data:{
8. abc:{
9. a:"1"
10. }
11.          }
12. })
13. </script>

if...else结构

1. <h1 v-if="ok">Yes</h1>
2. <h1 v-else>No</h1>

if...else if...else结构，if-else用嵌入的方式放进去

1. <div v-if=""></div>
2. <template v-else>
3.     <div v-if=""></div>
4.     <div v-else></div>
5. </template>

       v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

template v-if

        如果想切换多个元素，可以把一个<template>元素当作包装元素，并在上面使用v-if，最终的渲染结果不会包含它。

1. <template v-if="ok">
2.   <h1>Title</h1>
3.   <p>Paragraph 1</p>
4.   <p>Paragraph 2</p>
5. </template>

v-show

       不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。注意 v-show 不支持 <template> 语法。

1. <h1 v-show="ok">Hello!</h1>

       v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。          一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-for

        基于一个数组渲染一个列表。
        语法：item in items（数组元素的别名 in 数据数组）

1. <ul id="example-1">
2.   <li v-for="item in items">
3.     {{ item.message }}
4.   </li>
5. </ul>
6. var example1 = new Vue({
7.   el: "#example-1",
8.   data: {
9.     items: [
10.       { message: "Foo" },
11.       { message: "Bar" }
12.     ]
13.   }
14. })

       在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，是当前数组元素的索引。另外，可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：

1. <div v-for="(index, item) in items">
2.   {{ index }} {{ item.message }}
3. </div>

       从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：

1. <div v-for="item of items"></div>

template v-for

   渲染一个包含多个元素的块，需要将多个标签都用v-for遍历，那么就需要用template标签。同样，template在实际渲染的时候不会出现，只是起到一个包裹作用。

1. <div id="app">
2.     <ul>
3.         <template v-for="i in items">
4.             <li>Index is {{$index}}</li>
5.             <li>Content is {{i}}</li>
6.         </template>
7.     </ul>
8. </div>
9. <script>
10.     var vm = new Vue({
11.         el: "#app",
12.         data: {
13.             items: {
14.                 a: "1",
15.                 b: "2",
16.                 c: "3"
17.             }
18.         }
19.     })
20. </script>

        渲染为：

1. <ul>
2.         <li>Index is 0</li><li>Content is 1</li>
3.         <li>Index is 1</li><li>Content is 2</li>
4.         <li>Index is 2</li><li>Content is 3</li>
5. </ul>

数组变动检测

变异方法（修改了原始数组）：         vue.js包装了被观察数组的变异方法，故它们能出发视图更新，即当利用这些方法变更数组时，被渲染的内容会实时更新，被包装的方法有：

• push()         数组末尾添加
  
• pop()           数组末尾取出
  
• shift()          数组开头取出
  
• unshift()      数组开头添加
  
• splice()        删除并插入
  
• sort()           排序
  
• reverse()     数组顺序颠倒
  

1.     <ul id="demo">
2.         <li v-for = "item in items">
3.             {{item}}
4.         </li>
5.     </ul>
6.     <script>
7.         var vm = new Vue({
8.             el:"#demo",
9.             data:function(){
10.                 return {items:[4,2,3].splice(0,2)};
11.             }
12.  
13.         })
14.     </script>

替换数组（返回一个新数组）：        数组从一个数组变为另一个数组时（记得，数组是按引用传递的），数据绑定依然生效；但前提是使用以下方法： filter()           过滤，参数是一个函数，取其返回值为true的元素被添加到新数组 concat()       合并两个数组，返回的数组是合并后的 slice()           返回数组的拷贝，从开始索引到结束索引（前含后不含） track-by：        有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。
例如，假定数据为：

1. {
2.   items: [
3.     { _uid: "88f869d", ... },
4.     { _uid: "7496c10", ... }
5.   ]
6. }

然后可以这样给出提示：

1. <div v-for="item in items" track-by="_uid">
2.   <!-- content -->
3. </div>

       然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: "88f869d" 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。 track-by $index        如果没有唯一的键供追踪，可以使用 track-by="$index"，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。        这让数据替换非常高效，但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变，不能同步临时状态（比如 <input> 元素的值）以及组件的私有状态。因此，如果 v-for 块包含 <input> 元素或子组件，要小心使用 track-by="$index"。 问题：         vue.js不能检测到下面数组变化：

• 直接用索引设置元素，如 vm.items[0] = {}

       解决方案，$set()方法，demo.items.$set( 0 , {childMsg:"changed!"} )

• 修改数据的长度，如 vm.items.length = 0

       解决方案：只需要用一个空数组替换items         从目标数组中查找并删除元素，在内部调用splice()，this.items.$remove(item)

1. <ul id="demo">
2.         <li v-for = "item in items">
3.             {{item.name}}
4.         </li>
5.     </ul>
6.     <button onclick = "change()">移除</button>
7.     <script>
8.         var test = {name:"d"}
9.         var vm = new Vue({
10.             el:"#demo",
11.             data:{
12.                 items:[
13.                     {name:"a"},
14.                     {name:"b"},
15.                     {name:"c"}
16.                 ]
17.             },
18.         })
19.         vm.items.push(test);
20.         function change(){
21.             vm.items.$remove(test);
22.         }
23.     </script>

对象v-for

        作用域内还可以访问另一个特殊变量$key

1. <ul id="repeat-object" class="demo">
2.   <li v-for="value in object">
3.     {{ $key }} : {{ value }}
4.   </li>
5. </ul>
6. new Vue({
7.   el: "#repeat-object",
8.   data: {
9.     object: {
10.       FirstName: "John",
11.       LastName: "Doe",
12.       Age: 30
13.     }
14.   }
15. })

        也可以给对象的键提供一个别名：

1. <div v-for="(key, val) in object">
2.   {{ key }} {{ val }}
3. </div>

值域v-for

       v-for 也可以接收一个整数，此时它将重复模板数次。

1. <div>
2.   <span v-for="n in 10">{{ n }} </span>
3. </div>

       结果为：