本文主要是介绍07 v-if和v-show使用和区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
划重点：
- v-if
- v-show
小葱拌豆腐
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-if和v-show使用和区别</title><script src="./lib/vue-2.6.10.js"></script>
</head><body><div id="app"><input type="button" value="点击按钮" @click="if_show_Method"><p v-if="flag">我是v-if指令的使用</p><p v-show="flag">我是v-show指令的使用</p>
<!--
v-if: 通过关键字：flag可以显示和隐藏：flag：true的时候是显示；flag:false的时候是隐藏
v-show: 通过关键字：flag可以显示和隐藏：flag：true的时候是显示；flag:false的时候是隐藏
区别：
v-if：在隐藏的时候是把 标签 <p> 移除调了；也就是 v-if 适合在重复切换 布局中使用
v-show: 在隐藏的时候 相当于 对其设置样式 ：display:none ；是对样式的重新渲染所以：
v-if: 有较高的切换性能的消耗
v-show: 有较高的初始化渲染的消耗所以：
如果元素涉及到频繁的切换 ；最好使用：v-show
如果元素可能永远也不会被显示出来 被用户看到，则推荐使用 v-if --></div><script>var vm = new Vue({el: '#app',data: {flag: true},methods: {if_show_Method() {this.flag = !this.flag;}}})</script></body></html>这篇关于07 v-if和v-show使用和区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
