Vue中v-show,v-if,v-bind,v-text,v-html指令学习自用

最新推荐文章于 2022-04-06 08:36:19 发布

就这样征服你11

最新推荐文章于 2022-04-06 08:36:19 发布

阅读量385

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45882113/article/details/108625982

版权

v-show 指令

v-show的作用是根据表达式的真假，切换元素的显示和隐藏
本质是改变元素中display的状态显示，false的意思是：diplay:none true则默认显示
实例:

在实现一个vue实例的情况下，1.jpg显示，2.jpg则不显示
<img src="../img/1.jpg" v-show="true" />
<img src="../img/2.jpg" v-show="false" />

下面是一个实例，通过Vue的data中属性的判定实现图片状态的更改，@表示v-on指令单击事件。

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" >
		<title>v-show</title>
	</head>
<body>
<div id="test">
	<input type="button" value="切换状态显示" @click="changIsShow" />
	<input type="button" value="增加年龄" @click="add" />
	<img src="../img/1.jpg" v-show="isShow" />
	<img src="../img/2.jpg" v-show="age>=18" />
	
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//创建Vue实例
	var app=new Vue({
		el:"#test",
		data:{
			isShow:false,
			age:17
		},
		methods:{
			changIsShow:function(){
				this.isShow=!this.isShow;
			},
			add:function(){
				this.age++;
			}
		}
	})
	
</script>
</body>
</html>

v-if指令

v-if指令是根据表达式的真假，切换元素的显示和隐藏（但是是操作dom元素）
v-if和v-show很相似，都是操作元素的显示
但是，
一个是操作状态栏
一个是操作dom元素
频繁切换用v-show
反之用v-if
v-if应用实例：

<!DOCTYPE html>
<html>
<head>
   	<meta charset="utf-8" >
   	<title>v-if</title>
   </head>
<body>
<div id="test">
   <input type="button" value="切换显示" @click="changeShow" />
   <p v-if="isShow">好好学习</p>
   <p v-if="age>=18">18岁以上才能看到这句话</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   //创建Vue实例
   var app=new Vue({
   	el:"#test",
   	data:{
   		isShow:false,
   		age:18
   	},
   	methods:{
   		changeShow:function(){
   			this.isShow=!this.isShow;
   		}
   	},
   })
</script>
</body>
</html>

v-bind

用于设置元素的属性（比如src,title,class,name等等）
完整写法： v-bind：属性名
简写方法：：属性名

<img v-bind:src="imgSrc"  />
<img :src="imgSrc" />
相同效果

动态增删class:

<style>
	.active{
		border: 1px solid red;
	}
</style>
<!--判定isActive是否为真，为真采用，否则不采用格式-->
<img v-bind:src="imgSrc"  :class="isActive?'active':''"  ><!--繁琐写法，三元表达式-->
<img v-bind:src="imgSrc"  :class="{active:isActive}" ><!--简单写法，对象方式,建议-->

完整实例：

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" >
		<title>v-bind</title>
		<style>
			.active{
				border: 1px solid red;
			}
		</style>
	</head>
<body>

<div id="test">
	<img v-bind:src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="isActiveMethod" ><!--繁琐写法，三元表达式-->
	<img :src="imgSrc" :title="imgTitle+'!!!'" />
	<img v-bind:src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="isActiveMethod" ><!--简单写法，对象方式-->
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//创建Vue实例
	var app=new Vue({
		el:"#test",
		data:{
			imgSrc:"任意图片地址",
			imgTitle:"百度",
			isActive:false
		},
		methods:{
			isActiveMethod:function(){
				this.isActive=!this.isActive;
			}
		}
	})
</script>
</body>
</html>

v-text

其实v-text和v-html两个指令很相似，都可以提取文本元素
不过v-text是提取纯文本，v-html在提取之后会解析HTML标签元素。
看起来很简单，就不注释了
例：
v-text:

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" >
		<title>v-text指令</title>
	</head>
<body>
<div id="test">
	<h2 v-text="message1+'!'">深圳</h2>
	<h3 v-text="message2+'!'">深圳</h3>
	<h4>{{message1+'!!'}} </h4>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//创建Vue实例
		var test=new Vue({
			el:"#test",
			data:{
				message1:"这是测试内容1",
				message2:"这是测试内容2"
			}
		})
</script>
</body>
</html>

在这里插入图片描述

v-html :

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" >
		<title>v-text指令和 v-html指令</title>
	</head>
<body>
<div id="test">
	<h2 v-text="content"></h2>
	<h3 v-html="content"></h3>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//创建Vue实例
		var test=new Vue({
			el:"#test",
			data:{
				content:"<a href= 'https://www.csdn.net/'>我要准备写博客了</a>"
			}
		})
</script>
</body>
</html>

在这里插入图片描述

就这样征服你11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-show,v-if,v-bind,v-text,v-html指令学习自用

v-show 指令v-show的作用是根据表达式的真假，切换元素的显示和隐藏本质是改变元素中display的状态显示，false的意思是：diplay:none true则默认显示实例:在实现一个vue实例的情况下，1.jpg显示，2.jpg则不显示<img src="../img/1.jpg" v-show="true" /><img src="../img/2.jpg" v-show="false" />下面是一个实例，通过Vue的data中属性的判定实现图片状
复制链接

扫一扫