vue指令-v-if&v-show 小案例

最新推荐文章于 2023-02-04 22:05:07 发布

Joker_L_y

最新推荐文章于 2023-02-04 22:05:07 发布

阅读量277

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Joker_L_y/article/details/103757819

版权

Vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>

    <script src="./js/vue.js"></script>
    <style>
        .son {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="box">
        <input type="button" v-model="a" @click=ch()>
        <div class="son" v-show='b'>

        </div>
    </div>
</body>
<script>

    var vm = new Vue({
        el: '#box',
        data: {
            a: '点击隐藏',
            b: 'true'
        },
        methods: {
            ch() {
                if (this.a === '点击隐藏') {
                    this.a = '点击显示';
                    this.b = false

                } else if (this.a === '点击显示') {
                    this.a = '显示隐藏';
                    this.b = true;
                    this.a = '点击隐藏'

                }
            }
        }
    })

// 实现原理  : 通过css控制来实现的
// 特点: 有更高的渲染
//如果需要频繁的切换,就使用v-show

//
</script>

</html>`在这里插入代码片`