Vue中v-show和v-if指令的基本使用

06月

1430 0 0

v-show和v-if的使用

v-show和v-if都能够控制dom节点的出现与消失，那么它们怎样使用呢？它俩又有什么区别呢？

首先我们使用v-if来看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div v-if="show">hello world</div>
    <button @click="handleClick">toggle</button>
</div>
<script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            show: ''
        },
        methods: {
            handleClick: function() {
                this.show = !this.show;
            }
        }
    })
</script>
</body>
</html>

如上，当我们打开页面时效果如下图，可以看到root里面没有任何元素

当我们点击toggle切换时，再来观察元素的变化，可以看到root里面多了一个div标签，并且里面有hello world

从上面的代码以及运行结果可以看到当我们使用v-if指令的时候，它的值为空时，页面上的元素消失，并且没有任何的元素存在；它的值非空时，页面上的元素和值是存在的。

现在我们使用v-show来看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div v-show="show">hello world</div>
    <button @click="handleClick">toggle</button>
</div>
<script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            show: ''
        },
        methods: {
            handleClick: function() {
                this.show = !this.show;
            }
        }
    })
</script>
</body>
</html>

我们打开页面和控制台如下，会发现存放hello world这个div标签被添加上了display: none这个css样式的

当我们点击toggle切换时，再来观察元素的变化，可以看到div里面的display: none被去除了