Vue v-show指令_vue 修改v-show

作者：人工智能uu | 2024-07-26 12:49:42

踩

vue 修改v-show

Vue v-show指令

指令的作用：根据后面表达式的真假让元素显示或者隐藏，切换元素的显示状态。例如广告等。

//可以直接用显示图片
//直接为true或者false
<div>
	<img src="http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png" v-show="true">
</div>


//设置挂载显示图片
//使用赋值或者逻辑表达式判断的方式
//十八岁以上才可以显示图片
//可以设置一个点击事件，切换图片的显示状态
<div id="app">
	<input type="button" value="显示切换状态" @click="changeIsShow">
	<img v-show="isShow" src="http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png">
	<img v-show="age>18" src="http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png">
</div>
<script>
	var app = new Vue({
		el:"#app",
		data: {
			isShow:true,
			age:16
		},
		methods: {
			changeIsShow:function() {
			this.isShow = !this.isShow;
			}
		},
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

综合应用：
①设置isShow变量，每次点击切换显示状态就可以隐藏或者显示图片；
②设置age变量，每次点击增加年龄，直到大于等于十八岁才会显示图片；

<!DOCTYPE html>
<html>
    <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>草稿代码</title>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <div id="app">
            <input type="button" value="显示切换状态" @click="changeIsShow">
            <img v-show="isShow" src="http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png">
            <input type="button" value="增加年龄以显示图片" @click="addAge">
            <img v-show="age >= 18" src="http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png">
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data: {
                    isShow:false,
                    age:16
                },
                methods: {
                    changeIsShow:function() {
                        this.isShow = !this.isShow;
                    },
                    addAge:function() {
                        this.age++;
                    }
                },
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/885371