02 Vue绑定属性绑定Class 绑定style-完整

最新推荐文章于 2024-02-21 00:31:23 发布

原创最新推荐文章于 2024-02-21 00:31:23 发布 · 190 阅读

1 ·

CC 4.0 BY-SA版权

Vue基础中的基础+实战专栏收录该内容

26 篇文章

订阅专栏

本文深入讲解Vue.js中关键指令的使用方法，包括v-bind绑定属性、v-html绑定HTML、v-text绑定数据、v-bind:class绑定类样式及v-bind:style绑定内联样式，通过实例代码演示如何在实际项目中灵活运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue绑定属性绑定Class 绑定style

v-bind 绑定属性
v-html 绑定html
v-text 绑定数据
v-bind:class
v-bind:style
完整实验代码：

v-bind 绑定属性

template模板：

<template>
	<div id="app">
		<div v-bind:title="title">鼠标瞄上去看一下</div>
	</div>
</template>

js代码模块：

<script>
	export default {
		name: 'app',
		data() { /*业务逻辑里面定义的数据*/
			return {
						title: '我是一个title',
			}
		}
	}
</script>

类似的，可以使用v-bind:src="url"或:src="url"方式引入url中的图片！
实验效果如下图所示：
在这里插入图片描述

v-html 绑定html

template模板：

<template>
	<div id="app">
		<!-- 绑定html -->
		<div v-html="h"></div>
	</div>
</template>

js代码

<script>
	export default {
		name: 'app',
		data() { /*业务逻辑里面定义的数据*/
			return {
						h: '<h2>我是一个h2标签!</h2>',
					}
				}
	}
</script>

v-text 绑定数据

与v-html相类似

<!-- 绑定数据的另一种方法 -->
<div v-text="msg"></div>

v-bind:class

template模板：

<template>
	<div id="app">
		<!-- v-bind:class  :class的使用 -->
		<div v-bind:class="{'red':flag}">
			我是一个div
		</div>
		<br>
		<div v-bind:class="{'red':flag,'blue':!flag}">
			我是另外一个div
		</div>
		<br><hr>
		<!-- 循环数据,第一个数据高亮 -->
		<ul>
			<li v-for="(item,key) in list" 
			:class="{'red':key==0,'blue':key==1}">
				{{key}}------{{item.title}}
			</li>
		</ul>
	</div>
</template>

js代码模块：

<script>
	export default {
		name: 'app',
		data() { /*业务逻辑里面定义的数据*/
			return {
						flag: false,
						list: [{
							'title': '袁建奋'
						},
						{
							'title': '袁奋健'
						},
						{
							'title': '原件份'
						}
				]
			}
		}
	}
</script>

css:

.red {
	color: red;
}

.blue {
	color: blue;
}

v-bind:style

template模板：

<!-- v-bind:style :style的使用 -->
<div class="box" v-bind:style="{width:boxWidth+'px'}">
	我是一个box-div
</div>

js模块：

boxWidth: 500,

css模块：

.box {
	width: 100px;
	height: 100px;
	background: red;
}

完整实验代码：

<template>
	<div id="app">
		<h1>{{msg}}</h1>
		<br>
		<hr>
		<div v-bind:title="title">鼠标瞄上去看一下</div>
		<br>
		<hr>
		[外链图片转存失败(img-LBmRG0ya-1562170519603)(http://img0.imgtn.bdimg.com/it/u=1022109268,3759531978&fm=26&gp=0.jpg)]
		<br>
		<!-- 绑定属性 -->
		![在这里插入图片描述]()
		<br>
		![在这里插入图片描述]()
		<br>
		<hr>
		<!-- 绑定html -->
		<div v-html="h"></div>
		<br>
		<hr>
		<!-- 绑定数据的另一种方法 -->
		<div v-text="msg"></div>
		<br>
		<hr>
		<!-- v-bind:class  :class的使用 -->
		<div v-bind:class="{'red':flag}">我是一个div</div>
		<br>
		<div v-bind:class="{'red':flag,'blue':!flag}">我是另外一个div</div>
		<br>
		<hr>
		<!-- 循环数据,第一个数据高亮 -->
		<ul>
			<li v-for="(item,key) in list" :class="{'red':key==0,'blue':key==1}">
				{{key}}------{{item.title}}
			</li>
		</ul>
		<hr>
		<!-- v-bind:style :style的使用 -->
		<div class="box" v-bind:style="{width:boxWidth+'px'}">
			我是一个box-div
		</div>
	</div>
</template>

js模块:

<script>
	export default {
		name: 'app',
		data() { /*业务逻辑里面定义的数据*/
			return {
				msg: 'Welcome to the world of Vue!',
				title: '我是一个title',
				url: 'http://img0.imgtn.bdimg.com/it/u=1022109268,3759531978&fm=26&gp=0.jpg',
				h: '<h2>我是一个h2标签!</h2>',
				flag: false,
				boxWidth: 500,
				list: [{
						'title': '袁建奋'
					},
					{
						'title': '袁奋健'
					},
					{
						'title': '原件份'
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	#app img {
		width: 100px;
		height: 100px;
		margin-top: 25px;
	}

	.red {
		color: red;
	}

	.blue {
		color: blue;
	}
	.box {
		width: 100px;
		height: 100px;
		background: red;
	}
</style>