06_Vue指令篇之元素类/属性绑定指令

最新推荐文章于 2024-08-23 14:24:38 发布

嫣夜来

最新推荐文章于 2024-08-23 14:24:38 发布

阅读量1.2k

点赞数

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/qq_41865652/article/details/100981757

版权

Vue前端框架专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、v-bind

主要作用：给元素绑定或者移class，或者绑定一个或者多个属性

2、实例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>03_vue指令绑定属性和类_v-bind</title>
</head>
<body>
	<div class="app">
		<!-- 1、给某个DOM元素绑定类属性或者去除类属性 方式一: 对象类型-->
	   	<!-- 对象类型中的show代表class的名称 isShow取值为布尔类型，需要在vue实例对象的data属性中给出值，取值为true时，表示为div元素增加show类属性，反之表示移除show类属性-->
		<div v-bind:class="{show:isShow}"></div>
		<!-- 2、给某个DOM元素绑定类属性或者去除类属性 方式二: 数组类型-->
		<!-- 数组类型中的cls1代表class的名称就是data中的cls1属性，cls2代表class的名称就是data中的cls2属性，需要在vue实例对象的data属性中给出值-->
		<div v-bind:class="[cls1, cls2]"></div>
		<!-- 3、给某个DOM元素绑定多个属性 方式一：对象类型 -->
		<p v-bind:style="{color:red,fontSize:size+'px'}">123456</p>
		<!-- 4、给某个DOM元素绑定类样式或者去除类样式 方式二：数组类型 -->
		<p v-bind:style="[color, fontSize]">Hello World!</p>
		<!-- 5、v-bind的简写方式 :class="" 或者 :style="" -->
		<p :style="[color, fontSize]">v-bind的简写方式':class'或者':style'</p>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
	var app = new Vue({
		el: ".app",
		data: {
			isShow: true,
			cls1: 'hd',
			cls2: 'hd1',
			red: 'red',
			size: '40',
			color: {
				color: 'red',
			},
			fontSize: {
				fontSize: '36px',
			}
		}
	});
</script>
</html>

解释一下类属性的绑定，如下图：

在这里插入图片描述

解释一下元素属性的绑定，如下图：

在这里插入图片描述

3、v-bind的简写形式

<p :style="[color, fontSize]">v-bind的简写方式':class'或者':style'</p>

4、v-bind的特性

v-bind绑定数据是单向的，就是html中的元素的类或者样式的属性取值是受Vue实例对象中的data中的属性值影响的，但是html中的元素的类或者样式的属性取值发生改变时，Vue实例对象中的data中的属性取值是不会发生改变的，当刷新或者重新加载页面时，html中的元素的类或者样式的属性取值仍然是原来的取值。