首页 / VUE / Vue.js学习笔记： 指令 v-if
Vue.js学习笔记： 指令 v-if
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js学习笔记： 指令 v-if，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2582字，纯文字阅读大概需要4分钟。
内容图文
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，效果截图：
650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108041749145.jpg" title="QQ截图20161115222513.png" />greeting取值为false，效果截图：
650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108041749365.jpg" title="QQ截图20161115222540.png" />因为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>
650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108041749728.jpg" title="QQ截图20161115223007.png" />
在切换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
原文：http://dapengtalk.blog.51cto.com/11549574/1873289
内容总结
以上是互联网集市为您收集整理的Vue.js学习笔记： 指令 v-if全部内容，希望文章能够帮你解决Vue.js学习笔记： 指令 v-if所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。