vue显示隐藏 v-if v-else v-show

vue可以通过v-if设置元素的显示隐藏还可以配合v-else使用

配合点击事件来演示一下

点击按钮，按钮上文字变化，内容显示，再次点击，按钮上文字内容变化，内容隐藏

代码部分

<!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-test3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    <div id="test">
        <button @click="clickFun()">{{text}}</button>
        <p v-if="show"> 显示/隐藏 </p>
    </div>

    <script>
        const vm = new Vue({
            el: '#test',
            data: {
                show: true,
                text: '点击隐藏',
            },
            methods: {
                clickFun() {
                    // 改变show的值true/false
                    this.show = !this.show;
                    // 三元运算，改变按钮文字内容
                    this.text = this.show ? '点击隐藏' : '点击显示';
                }
            }
        })
    </script>
</body>

</html>

如果在写一个标签，标签内加上v-els

   <div id="test">
        <button @click="clickFun()">{{text}}</button>
        <p v-if="show"> 显示/隐藏 </p>
        <p v-else>v-else内容</p>
    </div>

就是这个效果

注意，如果这样用，加v-if和v-else的标签之间不能有其他的内容

V-show和v-else在页面上可以实现同样的效果，但是v-if是通过元素的移除/添加来实现显示隐藏，v-show是通过修改元素的display来实现的

如果同时多个元素实现显示隐藏，可以用vue的template标签

        <template v-if="show">
            <p> 显示/隐藏1 </p>
            <p> 显示/隐藏2 </p>
        </template>

来源：https://www.cnblogs.com/zhangcheng001/p/11474385.html

标签

vue