Vue v-show指令

最新推荐文章于 2023-03-27 13:54:05 发布

MurmanskYi

最新推荐文章于 2023-03-27 13:54:05 发布

阅读量346

点赞数 1

分类专栏： vue 文章标签：前端 vue javascript html

本文链接：https://blog.csdn.net/m0_57476889/article/details/119282263

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

综合应用：
①设置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>

MurmanskYi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>//设置挂载显示图片//使用赋值或者逻辑表达式判断的方式//十八岁以上才可以显示图片//可
复制链接

扫一扫