v-if指令

下例中，当ok的值为真时，语句就可见；为假时，语句就不可见。

<div id="app">
    <p v-if="ok">条件渲染</p>
</div>
<script>
    var i=new Vue({
        el:"#app",
        data:{
            ok:true
        }
    })
</script>

v-else指令

v-else指令不能单独使用，必须紧跟在v-if 或者 v-else-if 的元素后面。
下例中，当ok的值是false时，“不满足条件才显示” 语句显示，“条件渲染” 语句不显示。

<div id="app">
    <p v-if="ok">条件渲染</p>
    <p v-else>不满足条件才显示</p>
</div>
<script>
    var i=new Vue({
        el:"#app",
        data:{
            ok:false
        }
    })
</script>

v-else-if指令

跟在v-if指令后的条件判断，它可以连续多块使用。

下例中，当ok值为true时，整个语句只执行到“条件渲染”，当ok值为false时，执行后面的v-else-if="ok2"，ok2为true，语句只执行到“条件渲染2”，以此类推。

<div id="app">
    <p v-if="ok">条件渲染</p>
    <p v-else-if="ok2">条件渲染2</p>
    <p v-else-if="ok3">条件渲染3</p>
</div>
<script>
    var i=new Vue({
        el:"#app",
        data:{
            ok:false,
            ok:true,
            ok:false
        }
    })
</script>

v-for

v-for指令需要用到特殊的语法"item in items"，items是源数据数组，item是别名。

工作原理：

• 在遍历items属性的时候，用别名item代指当前的数组元素(键值对)；
• 再根据键值对的key(item.text)，得到当前的value;
• index用于输出数组的索引。

<div id="app">
    <div v-for="(item,index) in items">
        <p>{{item.text}}</p>
        <p>{{index}}</p>
    </div>
</div>
<script>
    var i=new Vue({
        el:"#app",
        data:{
            items:[{text:'first'},{text:'second'}]
        }
    })
</script>

v-for.png

<div id="app">
    <div v-for="item in items">
        <!--输出数组中的每一项-->
        <p>{{item}}</p>
    </div>
    <div v-for="value in students">
        <!--输出对象的值-->
        <p>{{value}}</p>
    </div>
    <!--输出键key、值value-->
    <div v-for="(value,key) in students">
        <h1>{{key}}的年龄是{{value}}</h1>
    </div>
</div>
<script>
     var i=new Vue({
        el:"#app",
        data:{
            items:[{text:'May'},{text:'Peter'}],
            students:{
                Tom:20,
                May:18,
            }             
        }
    })
</script>

效果： 数组与对象.png

（对象）别名的引入顺序是固定的：第一个别名代表属性值（value），第二个别名代表属性名（key），第三个别名代表索引（index）。即使改变别名名称，引入的内容也不会变的。

（数组）别名的引入顺序是：第一个别名代表值（item），第二个别名代表索引（index）。获取属性值的方式为：item . 属性名

v-for与v-if搭配使用

v-for指令可以和v-if指令在同一个标签中使用，因为v-for的优先级比v-if高，所以每循环一项都会做一次判断。

<div id="app">
    <div v-for="item in letter" v-if="!item.isRecieved">
        <h1>第{{item.numeroSign}}封信没有收到。</h1>
    </div>
</div>
<script>
     var i=new Vue({
        el:"#app",
        data:{
            letter:[
                {numeroSign:1,isRecieved:true},
                {numeroSign:2,isRecieved:false},
                {numeroSign:3,isRecieved:false}
            ]  
        }
    })
</script>

效果： 循环判断.png

<template> 元素

不可见的包裹元素，适合和v-if指令搭配使用。

<div id="app">
    <div>
        <h1 v-if="ok">条件渲染</h1>
        <h1 v-else>不满足条件才显示</h1>
    </div>
    <template v-if="ok">
        <h1>多个元素可以同时使用</h1>
        <p>template这个标签不会被渲染出来</p>
    </template>
</div>
<script>
        var i=new Vue({
        el:"#app",
        data:{
            ok:true
        }
    })
</script>

效果： template.png