条件渲染

v-if

v-if指令用于条件性地渲染一块内容

<h1 v-if="vue">Vue</h1>

也可以添加v-else

<h1 v-if="vue">Vue</h1>
<h1 v-else>React</h1>

在`<template>`元素上使用`v-if`条件渲染分组

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

<template v-if="ok">  
<h1>Title</h1>  
<p>t1</p>  
<p>t2</p>  
</template>

v-show

用法：

<h1 v-show="ok">Hello</h1>

v-show的元素始终会被渲染保留在DOM中，v-show只是简单切换元素的display

v-show不支持<template>元素，也不支持v-else

频繁切换：v-show 运行时条件很少改变：v-if

v-if和v-for一起使用

不推荐同时使用，当一起使用时，v-for有更高的优先级。

列表渲染

用v-for把一个数组对应为一组元素

可以基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，item是被迭代的数组元素的别名

//html
<ul id="app">
    <li v-for="item in items">{{item.message}}</li>
</ul>

//js
var vm = new Vue({
      el: "#app",
      data: {
        items:[
          {message:'Vue'},
          {message:'React'}
        ]
     }
    })

结果：

在v-for块中还支持一个可选的第二个参数，即当前项的索引：
v-for="(item, index) in items"

也可以用of替代in作为分隔符：
v-for="item of items"

在v-for里使用对象

可以使用v-for来遍历一个对象的property：

//html
  <ul id="app" class="demo">
    <li v-for="value in obj">{{value}}</li>
  </ul>

//js
new Vue({
      el:"#app",
      data: {
        obj:{
          title:'如何使用Vue',
          author:'Jane'
        }
      }
    })

结果：

可以提供第二个参数为property名称（也就是键名）：

<li v-for="（value,name) in obj">{{name}}:{{value}}</li>

数组更新检测

变更方法

变更方法会变更调用了这些方法的原始数组。
Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发试图更新。这些被包裹的方法包括：
push() 向数组的末尾添加一个或多个元素，并返回新的长度 pop() 移除数组的最后一个元素，并返回该元素
shift() 移除数组的第一项
unshift() 将新项添加到数组的开头，并返回新的长度
splice() 向/从数组中添加/删除项目，并返回删除的项目
sort() 对数组的项目进行排序
reverse()

替换数组

非变更方法：不会变更原始数组，而总是返回一个新数组，可以使用新数组替换旧数组。比如：filter() concat() slice()

显示过滤/排序后的结果

需要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。可以使用计算属性来返回过滤或排序后的数组。
例：

//html
  <ul id="app">
        <li v-for="n in evenNums">{{n}}</li>
  </ul>

//js
new Vue({
      el: "#app",
      data: {
        nums: [1, 2, 3, 4, 5]
      },
      computed:{
        evenNums:function(){
          return this.nums.filter(function(num){
            return num%2===0
          })
        }
      }
    })

结果：

在v-for里使用范围值

v-for也可以接受整数，会把模板重复对应次数。

<div>  
<span v-for="n in 10">{{ n }} </span>  
</div>

结果：

在`<template>`上使用`v-for`

类似于v-if,v-for的<template>来渲染一段包含多个元素的内容，比如：

<ul>  
<template v-for="item in items">  
<li>{{ item.message }}</li>  
<li class="content"></li>
</template>  
</ul>

在组件上使用v-for

在自定义组件上，可以像在任何普通元素上一样使用v-for,例：

<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0+的版本里，当在组件上使用v-for,key现在是必需的

但任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，可以使用prop

条件渲染和列表渲染（Vue2笔记）