v-show

最新推荐文章于 2024-07-06 16:47:02 发布

MIC的小橘子

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量216

点赞数 1

分类专栏： vue的介绍使用文章标签： javascript 开发语言前端 vue.js

本文链接：https://blog.csdn.net/weixin_54567665/article/details/139130578

版权

vue的介绍使用专栏收录该内容

10 篇文章 0 订阅

订阅专栏

从名字上就可以看出，v-show的所用就是显示或者隐藏一些元素。

可以通过一个布尔值（真或假）进行元素的隐藏或显示。如果是真值（true）就显示元素；如果是假值（false）就隐藏元素

虽然可以直接在v-show指令中设置true或false数据，但是为了能够更加灵活的控制显示或隐藏数据，一般布尔值数据需要从vue实例对象中来。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    <!-- 引入vue工具脚本 -->
    <script src="js/vue2.js"></script>
</head>
<body>
    <!-- 定义控制区域 -->
    <div id="box">
        <!-- 添加按钮控制信息的展示或隐藏 -->
        <button @click="show()">显示/隐藏</button>
        <br/>
        信息展示：
        <p v-show="isShow">我叫张三丰，武当掌门</p>
    </div>
    <!-- 自定义脚本 -->
    <script>
           // 创建实例
        var vm = new Vue({
            el: '#box',
            data: {
            isShow: true
            },
            methods: {
                show(){
                // 切换布尔值的内容
                // 每次进入到当前的函数之后进行布尔值的取反操作
                this.isShow = !this.isShow
                }
            },
        })
    </script>
</body>
</html>

MIC的小橘子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-show

虽然可以直接在v-show指令中设置true或false数据，但是为了能够更加灵活的控制显示或隐藏数据，一般布尔值数据需要从vue实例对象中来。可以通过一个布尔值（真或假）进行元素的隐藏或显示。如果是真值（true）就显示元素；如果是假值（false）就隐藏元素。从名字上就可以看出，v-show的所用就是显示或者隐藏一些元素。
复制链接

扫一扫