属性绑定,就是给html添加id、class这样类似的操作。
js
<template>
<div v-bind:id="dynamicId">
<div v-bind:class="dynamicClass">Test</div>
</div>
</template>
<script>
export default{
data(){
return{
dynamicId:"dynamicId",
dynamicClass:"dynamicClass"
}
}
}
</script>
<style>
.dynamicClass{
color: red;
font-size: 16px;
}
</style>
对于属性绑定我们使用v-bind
进行,日常中,我们可以简写:
html
<div :class="dynamicClass">Test</div>
我们也可以绑定布尔值,当值为null或者undefind的时候,不生效。
绑定多个属性,我们可以将其封装在对象里。
javascript
<template>
<div v-bind="objectOfAttrs">绑定多个属性</div>
</template>
<script>
export default{
data(){
return{
objectOfAttrs:{
id:'idName',
class:'className'
}
}
}
}
</script>
<style>
.className{
color: red;
font-size: 16px;
}
</style>