Vue v-bind指令

Vue v-bind教程

Vue v-bind 指令用于绑定属性，即把被绑定的属性中的值当做 Vue 实例中的变量解析。Vue v-bind 指令还可以支持 JavaScript 表达式。Vue v-bind 指令的简写形式为 :属性值。

案例

Vue v-bind绑定属性

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-bind指令</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="HaiCoder" v-bind:title="msg">
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'Vue v-bind Title'
		}
	})
</script>
</html>

浏览器运行后，效果如下图所示：

08 vue vbind.png

我们可以看到，button 的 title 属性并非显示为 msg，而是显示了 Vue 对象中 msg 的值。

Vue v-bind JavaScript表达式

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-bind 指令</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="HaiCoder" v-bind:title="value + 250">
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			value:110
		}
	})
</script>
</html>

浏览器运行后，效果如下图所示：

09 vue vbind.png

我们可以看到，button 的 title 属性并非显示为 110+250，而是显示了 110+250 的结果，由此可见 Vue v-bind 是可以支持 JavaScript 表达式的。

Vue v-bind缩写形式

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-bind缩写形式</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="HaiCoder" :title="value + 250">
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			value:110
		}
	})
</script>
</html>

浏览器运行后，效果如下图所示：

10 vue vbind.png

我们可以看到，button 的 title 属性同样显示了 110+250 的结果。

Vue v-bind指令总结

Vue v-bind 指令用于绑定属性，且可以支持 JavaScript 表达式。Vue v-bind 指令的简写形式为 :属性值。