Vue - v-bind

最新推荐文章于 2023-04-19 14:48:54 发布

ITKaven

最新推荐文章于 2023-04-19 14:48:54 发布

阅读量923

点赞数 1

分类专栏：前端框架文章标签： javascript vue css html 前端

本文链接：https://blog.csdn.net/qq_37960603/article/details/109525547

版权

前端框架专栏收录该内容

28 篇文章 2 订阅

订阅专栏

推荐：Vue汇总

Vue - v-bind

v-bind 使用

v-bind可以动态地绑定一个或多个attribute。

在绑定class或style这种attribute时，支持其它类型的值，如数组或对象。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<img v-bind:src="imgsrc">
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			imgsrc: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1746429185,3447265728&fm=26&gp=0.jpg'
		}
	})
</script>

效果：
在这里插入图片描述
简写

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<img :src="imgsrc">
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			imgsrc: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1746429185,3447265728&fm=26&gp=0.jpg'
		}
	})
</script>

:是v-bind:的简写形式，代码效果也是一样的。

内联字符串拼接

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<img :src="'https://dss1.bdstatic.com/' + imgsrc">
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			imgsrc: '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1746429185,3447265728&fm=26&gp=0.jpg'
		}
	})
</script>

效果也是一样的。

class 绑定

可通过数组或对象进行绑定。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div" :class="['class1' , 'class2' , 'class3']">
		</div>
	</body>
</html>
<style type="text/css">
	.class1{
		background-color: red;
	}
	.class2{
		border: 2px solid black;
	}
	.class3{
		width: 50%;
		height: 100px;
	}
</style>
<script>
	var vue = new Vue({
		el: '#div'
	})
</script>

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div" :class="{'class1' : true , 'class2' : true , 'class3' : class3}">
		</div>
	</body>
</html>
<style type="text/css">
	.class1{
		background-color: red;
	}
	.class2{
		border: 2px solid black;
	}
	.class3{
		width: 50%;
		height: 100px;
	}
</style>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			class3: true
		}
	})
</script>

效果也是一样的。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div" :class="['class1', {'class2' : true , 'class3' : class3}]">
		</div>
	</body>
</html>
<style type="text/css">
	.class1{
		background-color: red;
	}
	.class2{
		border: 2px solid black;
	}
	.class3{
		width: 50%;
		height: 100px;
	}
</style>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			class3: true
		}
	})
</script>

效果也是一样的。

style 绑定

其实和class绑定用法差不多，这里就简单介绍一下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<p :style="[{fontSize : size + 'px'} , colorObject]">Kaven</p>
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			size: 50,
			colorObject: {
				color: 'red'
			},
		}
	})
</script>

效果如下图：
在这里插入图片描述

绑定全是attribute的对象

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<p v-bind="{style : styleObject , class : class1}">Kaven</p>
		</div>
	</body>
</html>
<style type="text/css">
	.class1{
		border : 2px solid black;
	}
	.class2:hover{
		border: none;
	}
</style>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			styleObject: {
				color: 'red',
				fontSize : '50px'
			},
			class1: ['class1' , 'class2']
		}
	})
</script>

效果如下面两张图：

鼠标不放在框区域内。
在这里插入图片描述
鼠标放在框区域内，效果和预期一样。

单向绑定

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div">
			<input type="text" v-bind:value="inputValue">
		</div>
	</body>
</html>
<script>
	var vue = new Vue({
		el: '#div',
		data: {
			inputValue: 'kaven'
		}
	})
</script>