vue:v-show和v-if指令

这一篇我们来看v-show指令：

这个东西，可以让一些图片啥的在只有满足某些条件的情况下才显示出来，比如说，年龄必须大于等于18岁。

我们现在就搞一张冰墩墩的图片，然后我们弄一个点击器，点一下，显示，再点一下，不显示，再点一下，又显示，这样反复循环。

首先图片必须是有的，这个搞个img标签就好了。然后必须要给个v-show指令，里面是一个变量，啥变量？不着急慢慢来。

我们现在创建一个vue的app变量，除了必须要有的变量必须写之外，我们在data中创建一个isShow变量，初始值默认为false.

这个时候我们再写一个函数，实现逻辑很简单：this.isShow = !this.isShow;

所以，在img标签下的v-show指令出，写isShow。

接着我们需要一个点击事件，自然需要一个点击的东西。创建一个input，按钮类型，绑定的click呢自然就是上面那个函数。

这时你会发现刚开始没有图片，点击按钮，图片显示，再点，无，再点，有。。。

现在我们想要加一个年龄限制，不妨再弄一个冰墩墩，然后v-show那里写上age>=18.在data里面加上这个，默认年龄为15岁。

再写一个函数，就是点一下，年龄就加一这种，都是很简单的逻辑。然后你就会发现，只有点一定次数之后，图片才会显示。

奉上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <input type="button" value="年龄点击器" @click="addAge"/>
        <input type="button" value="图片切换显示" @click="changeShow"/>
        <img v-show="isShow" src="bingdundun.jpg" alt="">
        <img v-show="age>=18" src="bingdundun.jpg" alt="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:15
            },
            methods:{
                changeShow:function () {
                    this.isShow = !this.isShow;
                },
                addAge:function () {
                    ++this.age;
                }
            }
        })
    </script>
</body>
</html>

 另外你会发现还有一个v-if指令，效果实现与v-show差不多，区别就在于：v-show操作的是样式，而v-if操作的是DOM树。一般在实际开发中，若是对于需要频繁切换的元素，使用v-show,否则用v-if.因为操作DOM树对于性能的消耗会比较大。

 

 

posted @ 2022-02-13 16:29  EvanTheBoy  阅读(419)  评论(0)    收藏  举报