v-bind

v-bind指令

缩写： :
类型： any (with argument) | Object (without argument)
参数： attrOrProp (optional)
修饰符：

• .prop - 被用于绑定 DOM 属性。(what’s the difference?)
• .camel - (2.1.0+) transform the kebab-case attribute name into camelCase. (supported since 2.1.0)
• .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

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

示例

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src=""/path/to/images/" + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + "px" }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, "other-attr": otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

.camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性：

<svg :view-box.camel="viewBox"></svg>

在使用字符串模板或通过 vue-loader/vueify 编译时，无需使用 .camel。

代码示例1

	<div id="demo">
        <a  href="#" v-bind:href="hrefvalue">
            <img v-bind:class="c" src="logo.png" alt="">
        </a>
    </div>
    <script>
        var app=new Vue({
            el:"#demo",
            data:{
                hrefvalue:"http://www.baidu.com",
                c:"myred"
            }
        });
    </script>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind1.html

代码示例2

		<div id="box"> 
			<img v-bind:src="url" :width="w"/>
			<img :src="url" :width="w"/>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
				   url:"logo.png",
				   w:"100px"
				},
				methods:{
					show:function(){
						alert("你按回车了")
					}
				}
			})
		</script>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind2.html

代码示例3

		<div id="box"> 
			<span :class="[red, b]">文字……</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
				 	red:"red",
				 	b:"blue"
				},
				methods:{
				}
			})
		</script>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind3.html

代码示例4

		<div id="box"> 
			<span :class="{red:a,blue:b}">文字……</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
				 	a:true,
				 	b:false
				},
				methods:{
				}
			})
		</script>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind4.html

代码示例5

		<div id="box"> 
			<span :style="[c,b]">文字……</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
				 	c:{"color":"red"},
				 	b:{"backgroundColor":"blue"}
				},
				methods:{
				}
			})
		</script>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind5.html

代码示例6

		<div id="box"> 
			<span :style="a">文字……</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#box",
				data: {
				 	a:{
				 		color:"red",
				 		background:"blue"
				 	}
				},
				methods:{
				}
			})
		</script>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/09v-bind6.html