Vue.js之v-if

Posted 饭特稠

tags:

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

---恢复内容开始---

首先,在跟着api做的时候,要把v-if包裹在Vue对应的el里面,重要的事情说三遍。

html:

<div id="vif">
    <div v-if="Math.random() > 0.1">
        Now you see me
    </div>
    <div v-else>
        Now you don‘t
    </div>
</div>

js:

var app13=new Vue({
    el:‘#vif‘
});

这样才能显示其中一个标签的内容。(v-else必须紧挨着v-if)

v-show与v-if 的区别在于v-show所对应的元素会一直被渲染出来,v-show所做的只是切换该元素的css属性。v-if值如果是false,则该元素不会出现在DOM中

 

---恢复内容结束---

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

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

Vue.js(2.x)之条件渲染

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

v-if 条件在 vue.js 文件中获取错误消息

Vue.js代码优化:在dom中加一行v-if就可少写一个循环类方法

使用Youtube API调用的iframe在Vue.js V-if命令后不会出现