vue 中 v

vue 中 v"/>

vue 中 v

vue 中 v-if 和 v-show 指令的共同点与不同点

共同点：

都可以用来控制元素的显示与隐藏

不同点：

v-if 指令是通过动态的删除或者添加 DOM 元素，来控制元素的显示与隐藏，比较消耗性能，如果元素不是经常显示隐藏切换，可以考虑用 v-if 。
v-show 指令是通过控制 css 样式中的 display: none/display: block，来控制元素显示与隐藏，适用于频繁显示隐藏切换的场景

v-if

<template><div><div v-if="show" class="v-if">v-if</div><div v-else class="v-else">v-else</div><!-- true 显示，false 隐藏 --></div>
</template>
<script>export default {data() {return {show: false}}}
</script>

v-show

<template><div><div v-show="show" class="v-show">v-show</div><!-- true 显示，false 隐藏 --></div>
</template>
<script>export default {data() {return {show: false}}}
</script>