Vue.js学习笔记: 指令 v-if

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js学习笔记: 指令 v-if相关的知识,希望对你有一定的参考价值。

v-if  完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;否则,对应元素的一个克隆将被重新插入DOM中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <p v-if="greeting">Hello</p>
</div>

<script src="js/vue.js"></script>
<script>
    var vm2 = new Vue({
        el:‘#example‘,
        data:{
            greeting:true  //或false
        }
    })
</script>
</body>
</html>


greeting取值为true,效果截图:

技术分享

greeting取值为false,效果截图:

技术分享

因为v-if是一个指令,需要将它添加到一个元素上。但是如果想切换多个元素,则可以把<template>元素当作包装元素,并在其上使用v-if,最终的渲染结果不会包含它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph1</p>
        <p>Paragraph2</p>
    </template>
</div>

<script src="js/vue.js"></script>
<script>
    var vm3 = new Vue({
        el:‘#example‘,
        data:{
            ok:true
        }
    })
</script>
</body>
</html>

技术分享



在切换v-if模块时,Vue.js有一个局部编译/卸载过程,因为v-if中的模板可能包括数据绑定或子组件。v-if是真实的条件渲染,因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。


v-if是惰性的--如果初始渲染时条件为假,则什么也不做,在条件第一次变为真时才开始局部编译(编译会被缓存起来)。


相比之下,v-show简单得多----元素始终被编译并保留,只是简单地基于CSS切换。


一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁地切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。


v-else   顾名思义,v-else就是javascript中else的意思,它必须跟着v-if或v-show,充当else功能

<div id="example">
    <p v-if="ok">我是对的</p>
    <p v-else="ok">我是错的</p>
</div>

<script src="js/vue.js"></script>
<script>
    var vm3 = new Vue({
        el:‘#example‘,
        data:{
            ok:false
        }
    })
</script>

技术分享


将v-show用在组件上时,因为指令的优先级v-else会出现问题,所以不要这样做

<custom-component v-show="condition"></custom-component>


我们可以用另一个v-show替换v-else

<custom-component v-show="condition"></custom-component>

<p v-show="condition">这可能也是一个组件</p>



本文出自 “dapengtalk” 博客,请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1873289

以上是关于Vue.js学习笔记: 指令 v-if的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js学习笔记: 指令

Vue.js前端框架系统学习——Vue指令之v-text,v-html,v-if,v-show

vue.js

如何利用Vue.js库中的v-if内部指令判断元素显示

Vue.js的常用指令

vue.js的v-if判断数组多少个