【Vue】Vue中v-bind的使用

Mastache语法不能作用于HTML特性上，遇到这种情况应该去使用v-bind指令对于布尔特性，它比较特殊，他们只要存在就意味着值为true，v-bind:disabled使用要特别注意下<button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button>上面的代码中，如果isButtonDisabled的值是

阿酒在看云

14876人浏览 · 2020-06-24 18:43:06

阿酒在看云 · 2020-06-24 18:43:06 发布

1. v-bind概念

2.v-bind使用实例

3.v-bind使用中的注意事项

1. v-bind概念

v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。v-bind可以简写为：

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc" >

在绑定class或style时，支持其他类型的值，如数组或者对象。代码示例如下：

<body id="example">
    <div :class="[classA, {classB: isB, classC: isC}]"></div> 
</body>
<script>
    var demo = new Vue({
        el: '#example',
        data:{
            classA: 'A',
            isB: false,
            isC: true
        }
    })
</script>

最终渲染的结构为

<body id="example">
    <div class="A classC"></div> 
    <script>...</script>
</body>

没有参数时，可以绑定到一个对象。注意，此时class和style绑定不支持数组和对象（对象key会转换为小写），代码示例如下：

<body id="example">
    <div v-bind="{id: someProp,'OTHERAttr': otherProp }"></div>
</body>
<script>
    var exampleVM2 = new Vue({
        el: '#example',
        data:{
            someProp:'idName',
            oherProp: 'prop'
        }
    })
</script>

最终渲染的结构为：

<body id="example">
    <div id="idName" otherattr="prop"></div>
    <script>...</script>
</body>

2.v-bind使用实例

Mastache语法（即{{msg}}这样的格式）不能作用于HTML特性上，遇到这种情况应该去使用v-bind指令

v-bind:属性 = "(在vue中要用的变量名字)"

例子：

<div v-bind:id="dynamicId"> 本div的id是vue决定的哈哈<div>

对于布尔特性，它比较特殊，他们只要存在就意味着值为true，

v-bind:disabled使用要特别注意下

	<button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button>

上面的代码中，如果isButtonDisabled的值是null、undefined或者false，则disabled特性甚至不会被包含在渲染出来的<button>元素中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插值之原始HTML</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-bind:class ="color">我是被vue控制的颜色属性</div>
		<button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				color: 'skyblue',
				isButtonDisabled: false,
			}
		});
	</script>
</body>
<style>
  .red{color:red;}
  .skyblue{color:skyblue;}
</style>
</html>

这段代码的运行结果是

button仍可点击，当将isButtonDisabled的值改为 true时，则按钮变灰，不可点击。

3.v-bind使用中的注意事项

在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符为：

- .sync——双向绑定，只能用于prop绑定

- .once——单次绑定，只能用于prop绑定

- .camel——将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定，通常用于绑定用驼峰命名的SVG特性，比如viewBox。

<!-- prop绑定，"prop"必须在my-component组件内声明 -->
<my-component :prop="someThing"></my-component>
<!-- 双向prop绑定 -->
<my-component :prop.sync="someThing"></my-component>
<!-- 单次prop绑定 -->
<my-component :prop.once="someThing"></my-component>