VUE条件渲染(v-if v-show v-for)

v-if:

v-if是一个指令，（逻辑与原生js一样，只是使用方法稍有不同）需要添加在元素上，如果想要添加在多个元素上，可以使用标签当成一个容器。
官网上的例子：

<div id="vv" v-if="mat > 5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

var vm = new vue ({
    el:"vv",
    data:{
        num : 10
    },
    computed:{
        mat : function (){
        return this.num*Math.random()
    }
})

使用标签当容器

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

利用key值管理可以复用的元素，由于vue尽可能的少渲染，所以在以下代码中如果不使用key值，会使input标签不会重新渲染，输入内容会一直存在。
key值的作用就是将input标签添加上自己独有的特征，在我看来与class、id比较类似。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show 与 v-if 的使用方法一致，不同点在于，v-if在每一次切换是都会重新渲染，如果一开始的条件是false，则会等到第一次条件成立开始渲染。v-show 无论初始条件如何，都会渲染进来，改变的是DOM的 display ：none／block。如果需要多次渲染，使用v-show。

v-for:
v-for类似与js中的遍历，使用方法为v-for(item in items)，items是数组 item是数组中的元素。在 v-if与v-for一起使用时，v-for的权重更高。

<div id="demo">
 <table>
 <tr v-for="A in B">
 <td>{{ A.name }}</td>
 <td>{{ A.age }}</td>
 <td>{{ A.sex }}</td>
 </tr>
 </table>
</div>

<script>
 var vm = new Vue({
 el: '#demo',
 data: {
      B:[{name: 'Jack',age: 30,sex: 'Male'}, 
         {name: 'Bill',age: 26,sex: 'Male'},
         {name: 'Tracy',age: 22,sex: 'Female'}, 
         {name: 'Chris',age: 36,sex: 'Male'}]
     }
 })
</script>