Vue指令v-bind

最新推荐文章于 2024-09-18 08:44:09 发布

俗世凡人行

最新推荐文章于 2024-09-18 08:44:09 发布

阅读量159

点赞数

分类专栏： Vue 文章标签： v-bind

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107588211

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

Vue指令

指令是带有v-前缀的特殊属性;写在标签上面,而不是标签里面;

属性

v-bind动态绑定

动态绑定属性名和属性值

Mustache语法(双大括号)不能作用在HTML attrebute上, 遇到这种情况应该使用v-bind指令;

<p v-bind:title="cla">hello vue</p>
动态参数

<a v-bind:[attrName]="url">点我</a>

data:{
    attrName:'href',
    url:'https://www.baidu.com'
}

v-bind: =====> : 缩写
Class与Style绑定

表达式结果的类型除了字符串之外, 还可以是对象或数组;

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 属性的动态绑定 -->
			<!-- <p v-bind:class="cla"></p>			 -->
			<!-- <p v-bind:title="cla">hello vue</p>		 -->
			<!-- 属性进行动态修改,attrname这个地方attrname和attrName没有区别, 
			大写也会转化为小写,但vue里面必须都小写 -->
			<!-- <p v-bind:[attrname]="cla">hello vue</p>		 -->
			<!-- v-bind: 缩写成: -->
			<!-- <p :[attrname]="cla">hello vue</p>		 -->
			<!-- isActive等于true时,class就等于active;
			isActive等于false时,class就没有值了,这是对象的形式 -->
			<!-- <p :class="{active:isActive}">hello vue</p>	 -->
			<!--一个class有多个值,可以写成数组形式,多个样式梳理常用  -->
			<!-- <p :class="[activeClass,errorClass]">您好!</p> -->
			<!-- 绑定style,用对象的形式 -->
			<p :style="styleObj">hello vue</p>
				
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			cla:'active',
			attrname:'title',
			isActive:false,
			activeClass:'active',
			errorClass: 'error',
			styleObj:{color:'red',fontSize:'54px'}
			
		}
	})	
	
</script>