Vue的v-bind的使用方式

最新推荐文章于 2022-09-06 13:49:13 发布

Love_云宝儿

最新推荐文章于 2022-09-06 13:49:13 发布

阅读量257

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_38084879/article/details/117451602

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.基本使用方式

mustache语法只能用于dom中，而不能用于属性中，但当我们希望dom的某些属性也动态绑定的时候，这时候就用到了v-bind语法了

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令动态绑定属性。语法糖（缩写）:冒号，废话不多说，上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--错误的语法，这里不可以使用mustache语法-->
			<!-- <img src="{{url}}" /> -->
			<!-- 正确的做法：使用v-bind指令 -->
			<img v-bind:src="imgUrl"/>
			<a v-bind:href="url">百度一下</a>
			<!-- 语法糖写法，直接冒号 -->
			<img :src="imgUrl"/>
			<a :href="url">百度一下</a>
		</div>
	</body>
</html>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbbsimg.91quka.cn%2F2019022011045633.jpg&refer=http%3A%2F%2Fbbsimg.91quka.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625142846&t=d1cf2cc42f41044ef74e45c6d7d5e3de",
			url:"http://www.baidu.com"
		},
		methods:{
			
		}
	});
</script>

页面结果：

绑定其他属性都是类似的，这就是v-bind的基本使用方式。

2.动态绑定class

动态绑定class和基本使用一样，可以直接使用：进行绑定。

除了普通的绑定方式，我们也可以绑定对象，绑定对象传递参数一般为：

{类名:布尔值,类名:布尔值······}

当布尔值为true的时候，类名就会加载到当前dom中；当布尔值为false的时候，类名就不会加载到dom中，下面上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<style>
		.active{
			color: red;
		}
		.inline{
			color: green;
		}
	</style>
	<body>
		<div id="app">
			<!-- 普通的动态绑定方式 -->
			<h2 :class="active">{{message}}</h2>
			
			<!--解释一下，动态绑定class除了传递普通值，也可以传递对象，一般key为类名，value为布尔值，
			当value为true的时候，类名会被加载到当前dom中-->
			<!-- <h2 :class="{key1:value1,key2:value2}"></h2> -->
			<!-- <h2 :class="{类名1:true,类名2:false}"></h2> -->
			<h2 :class="{active:isActive,inline:isInline}">{{message}}</h2>
		</div>
	</body>
</html>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			message:"娃儿瑞",
			active:'active',
			isActive:false,
			isInline:true
		},
		methods:{
			
		}
	});
</script>

结果如下，第一个h2只有active，第二个只有inline：