05-Vue指令之v-bind

Vue指令：v-bind 属性绑定

  • v-bind：动态绑定一个或多个属性，或用:缩写。:后面跟属性名，例如：v-bind:src="imgSrc"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令之v-bind</title>
	</head>
	<body>
		<div id="app">
			<p>
				<!-- v-bind 绑定属性-->
				<a v-bind:href="myhref">URL链接</a>
			</p>
			<p>
				<!-- v-bind 缩写方式：-->
				<a :href="myhref">URL链接</a>
			</p>
			<p>
				<!-- v-bind 绑定一个对象，key为属性名，value为设定值-->
				<a v-bind="{ href:myhref, title:mytitle }">URL链接</a>
			</p>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				myhref: "http://www.google.com",
				mytitle: "点击跳转到xxxx页面"
			}
		})
	</script>
</html>

浏览器中的显示结果

PS：如有任何问题，欢迎在下面评论区留言，让我们共同进步，非常感谢！（^o^）v

web前端开发 > Vue
#JavaScript #web前端 #Vue
05-Vue指令之v-bind
https://liaoliaocode.xyz/article/3c23/
作者
Brian.Gao
发布于
2022年4月9日
许可协议