-
缩写:
:
-
类型:
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> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
Class 与 Style 绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用
v-bind
处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind
用于class
和style
时, Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
对象语法
我们可以传给
v-bind:class
一个对象,以动态地切换 class 。 -
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 class
active
的更新将取决于数据属性isActive
是否为真值 。我们也可以在对象中传入更多属性用来动态切换多个 class 。此外,
v-bind:class
指令可以与普通的 class 属性共存。如下模板:<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
如下 data:
-
data: { isActive: true, hasError: false }
渲染为:class="static active"
-
当
isActive
或者hasError
变化时,class 列表将相应地更新。例如,如果hasError
的值为true
, class列表将变为"static active text-danger"
。你也可以直接绑定数据里的一个对象:
-
<div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } }
渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
-
<div v-bind:class="classObject"></div> data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } }
数组语法
我们可以把一个数组传给
v-bind:class
,以应用一个 class 列表:<div v-bind:class="[activeClass, errorClass]"> data: { activeClass: 'active', errorClass: 'text-danger' }
渲染为:<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class ,可以用三元表达式:
-
<body> <div id="watch-example"> <p :class="[a?active:'',b]" class="qq" > woshige biaoqian </p> </div> </body> </html> <script> var watchExampleVM = new Vue({ el: '#watch-example', data: { obj:{ dd:true, 'vv':1 }, b:'red', a:true, active:'newclass' } }) </script>
-
此例始终添加 red,但是只有在 a是 true 时添加 newclass。
不过,当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法:
-
<div v-bind:class="[{ active: isActive }, errorClass]">
用在组件上
当你在一个定制的组件上用到
class
属性的时候,这些类将被添加到根元素上面,这个元素上已经存在的类不会被覆盖。Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' })
然后在使用它的时候添加一些 class:
-
<my-component class="baz boo"></my-component>
HTML 最终将被渲染成为
-
同样的适用于绑定 HTML class :<p class="foo bar baz boo">Hi</p>
-
<my-component v-bind:class="{ active: isActive }"></my-component>
当isActive
为 true 的时候,HTML 将被渲染成为: -
<p class="foo bar active">Hi</p>
v-bind
最新推荐文章于 2024-07-05 11:27:33 发布