v-if

v-if指令

类型： any
用法： 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

示例

<h1 v-if="ok">Yes</h1>

代码示例1

<div id="app">
    <h1>Hello,Vue  js!!</h1>
    <h1 v-if="yes">Yes!</h1>
    <h1 v-if="no">No!</h1>
    <h1 v-if="age >=25">Age:{{age}}</h1>
    <h1 v-if="name.indexOf("jack") >=0">Name:{{name}}</h1>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
            data:{
                yes:true,
                no:false,
                age:28,
                name:"abcdefg"
        }
    })
</script>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/04v-if1.html

效果如图：

• 这段代码使用了4个表达式：
• 数据的yes属性为true，所以"Yes!"会被输出；
• 数据的no属性为false，所以"No!"不会被输出；
• 运算式age >= 25返回true，所以"Age: 28"会被输出；
• 运算式name.indexOf("jack") >= 0返回false，所以"Name: keepfool"不会被输出。

注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

这一点可以从渲染的HTML源代码看出来，面上只渲染了3个<h1>元素，v-if值为false的<h1>元素没有渲染到HTML。

为了再次验证这一点，可以在Chrome控制台更改age属性，使得表达式age >= 25的值为false，可以看到<h1>Age: 28</h1>元素被删除了。

age是定义在选项对象的data属性中的，为什么Vue实例可以直接访问它呢？
这是因为每个Vue实例都会代理其选项对象里的data属性。

<template> 中 v-if 条件组

代码示例2

<div id="demo">
    	<template v-if="login">
		  <h1>Title</h1>
		  <p>Paragraph 1</p>
		  <p>Paragraph 2</p>
		</template>
    </div>
    <script>
        var app=new Vue({
            el:"#demo",
            data:{
                login:true 
            }
        });
    </script>

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/04v-if2.html
效果如图：