部分Vue指令解释
1. v-show 和 v-if
什么是 v-if
v-if 指令,用于条件性渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
来看下面的例子:
<template>
<div>
<h1 v-if="visible">你能看见我吗?</h1>
</div>
</template>
<script>
export default {
name: 'test-v-if',
data() {
return {
visible: 'true',
}
}
}
</script>
<style scoped>
h1 {
color: aqua;
}
</style>
此时,是有这个元素的:
在页面也能展示出来:
如果,将 visible
这个属性设置为 ‘false’,则该元素消失,而在控制台中,也没有这个标签。
所以,v-if
用来确定是否渲染目标组件,如果设置为 true,正常渲染,亦可在找到该元素;若为 false,则意味着这个组件根本不会渲染,也就不会挂在在DOM树中。
什么是 v-show
v-show 是根据条件来决定是否展示元素的指令,用法大致和 v-if
相同。
<template>
<div>
<h1 v-show="visible">v-show指令哦