Vue 部分指令详解

部分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指令哦࿰