v-bind绑定属性样式(新增在methods和computed中写样式用return返回 )
一、class的四种绑定方式
1、布尔值的绑定方式
<div id="demo">
<span v-bind:class="{'class-a':isA ,'class-b':isB}"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
isA: true,
isB: true
}
})
2、变量的绑定方式
<div id="demo">
<span :class=[classA,classB]></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
classA:"class-a",
classB:"class-b"
}
})
3、字符串绑定方式
<div id="demo">
<span :class="classA"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
classA:"string"
}
})
4、三目运算
<div id="demo">
<p :class="isclass?classC:classD"></p>
</div>
var vm = new Vue({
el:"#demo",
data:{
classC:"C",
classD:"D",
isclass:true
}
})
5、综合的写法
<div id="demo">
<span :class="[one,{'classA':classa,'classB':classb}]"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
one:"string",
classa:true,
classb:false
}
})
<p :style="{fontSize:font,color:red}">绑定style</p>
背景图片写法 链接有()会和css的url()冲突,需要再用一层引号将其包住
:style="{background:'url(\''+item.img+'\') no-repeat center/cover'}"
或者
<p :style="styleObject">用对象绑定style</p>
data:{ font:"24px", red:"red", styleObject:{ fontSize:"30px", color:"pink" } }
在methods和computed中写样式用return返回
在methods方法中使用 :style="_sublineStyle(item)" _sublineStyle (item) { return `-webkit-transform:rotate(${item}deg) translateX(-50%);transform:rotate(${item}deg) translateX(-50%);` }, 在computed计算属性中使用 :style="[diameter]" diameter () { return { width: this.r * 2 + 'px', height: this.r * 2 + 'px' } }