一或辖、v-bind:class用法
<style>//樣式
.box{background-color: #ff0;}
.textColor{color: blue;}
.textSize{font-size: 30px;}
</style>
1.布爾值判斷是否采用
<span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>
data:{
isColor:true,
isSize:true
}
2.對象屬性-布爾值判斷是否采用
<span class="box" :class="classObject">我是字</span>
data:{
classObject:{
'textColor': true,
'textSize': true
}
4.isA?classA:''三元表達(dá)式
<span class="box" :class="[isA?classA:'', classB]">我是字</span>
data:{
classA: 'textColor',
classB: 'textSize',
isA: false
}
3.數(shù)組形式
<span class="box" :class="[classA,classB]">我是字</span>
data:{
classA: 'textColor',
classB: 'textSize'
}
二四苇、v-bind:style
1
<span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>
data:{
activeColor: 'red',
size: '30px',
shadow: '5px 2px 6px #000'
}
2.
<span class="box" :style="styleObject">我是字</span>
data:{
styleObject:{
color: 'red',
fontSize: '30px',
textShadow: '5px 2px 6px #000'
}
3.
<span class="box" :style="[styleA,styleB]">我是字</span>
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
}
}
4.
<span class="box" :style="[isA?styleA:'', styleB]">我是字</span>
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
},
isA: false
}
三月腋、v-bind:src
<a :href="url"></a>
data:{
url: "../img/pg.png"
}
四瓣赂、v-bind:title
ps：這個顯示方式自己試試
<div id="app">
<div :title="message">我是字</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data:{
message:"我是吱吱"
}
})
</script>
