v-bind指令详解-优快云博客

1. v-bind使用

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

2. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性绑定指令</title>
	<script src="./js/vue.js"></script>
</head>
<body>
	 <div id="app">
	    <!-- v-bind指令用于绑定元素属性值 类似attr prop  v-bind:属性名="参数名"-->
		<a v-bind:href="url">百度</a>
		<!--行内表达式 :属性名="参数"-->
		<img :src="imgsrc"/>
	</div>
</body>
 <script>
	 new Vue({
			  el:"#app",
			  data:{
				url:"http://www.baidu.com",
				imgsrc:"https://www.runoob.com/wp-content/uploads/2017/01/vue.png"
			  }
		   });
 </script>
</html>