标签：Vue 区别 DOM js 渲染 show 元素
概要
Vue.js是一种流行的JavaScript框架，用于构建交互式的Web应用程序。在Vue.js中，v-if和v-show是两个常用的指令，用于控制DOM元素的显示与隐藏。本文将介绍它们之间的区别。
整体架构流程
Vue.js的整体架构基于虚拟DOM和响应式数据，当数据发生变化时，Vue会重新渲染组件并更新DOM。
两指令间的具体细节
-
v-if：
Vue.js指令，根据表达式的真假值来决定是否渲染DOM元素。当条件为假时，元素及其子组件将不会被渲染到DOM中。在经过查询官方文档上是后这么说的（https://v2.cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show），v-if 是“真正”的条件渲染，在初始渲染时条件为假，则什么也不做直到条件第一次变为真时，才会开始渲染条件块。以下是我用简单的一段代码进行演示：
<template>
<div class="container">
<h1 v-if="msg === true">今天天气下雨</h1>
<h1 v-else>今天天气晴朗</h1>
<button @click="changeMsg">改变状态</button>
<hr>
<h1 v-show="thing === true">睡觉</h1>
<h1 v-show="thing === false">吃饭</h1>
<button @click="changeThing">改变事情</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
msg:true,
thing:true,
}
},
methods: {
changeMsg(){
this.msg = !this.msg
},
changeThing(){
this.thing = !this.thing
}
},
}
</script>
<style scoped>
</style>
这段代码中定义两个数值，点击按钮切换对应文字，实现了最简单的条件渲染。运行在浏览器我们可以看到v-if渲染的，当状态值改变时，是将dom元素整个添加或删除。
-
v-show：
Vue.js指令，根据表达式的真假值来控制DOM元素的显示与隐藏，通过CSS的display属性实现。即使条件为假，元素仍然会被渲染到DOM中，只是通过CSS样式的控制来隐藏。
同样借助上面的代码实现分割线下面的内容渲染，v-show在渲染时，是将原有属性用display：none实现隐藏，dom元素依旧还在。
小结
本文就讲到这里啦！另外还需注意的是，两条指令也有优先级。v-if的优先级高于v-show。这意味着如果同时在同一个元素上使用了v-if和v-show指令，v-if的条件优先于v-show的显示与隐藏。
标签：Vue,
区别,
DOM,
js,
渲染,
show,
元素
From： https://blog.csdn.net/m0_74287868/article/details/139352926