Vue2学习笔记:v-show指令

最新推荐文章于 2024-05-29 14:10:30 发布

转载最新推荐文章于 2024-05-29 14:10:30 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zycbloger/p/6422708.html

文章标签：

#javascript #ViewUI

本文通过一个示例详细介绍了Vue.js中v-show指令的使用方法。该指令通过切换元素的CSS属性display来实现元素的显示与隐藏，适用于需要频繁切换显示状态的场景。

v-show指令：v-show="true/false" 控制元素显示/隐藏

1.使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    isShow:false,
                },
                methods:{
                    toggle:function(){
                        this.isShow = !this.isShow;
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="toggle" v-on:click="toggle()"> <br />
        <div v-show="isShow" style="width: 100px;height: 100px;background: red"></div>
    </div>
</body>
</html>