<template>
<div class="style">
<p>通过(对象)布尔值绑定一个或多个</p>
<p :class="{'bg_red':true,'color_green':0==0,'bg_red':bool}">
class 样式通过布尔值设置
key 值做类名,布尔值实现类名的增删
动态样式主要用于条件判断实现类名的增删
</p>
<p :class="Font_size">
在对象里面有类名:布尔
动态样式主要用于条件判断实现类名的增删
</p>
<p>通过数组实现类名绑定</p>
<p :class="[newbg_red,color_green]">
相当于样式bg_red样式在div中重命名 为newbg_red
</p>
<P :class="['1==1'?baseclass:newbg_red,newbg_red]">
三目运算符 实现的是类名的重命名 也可以实现多个类名
</P>
对象显示样式
<hr/>
<p :style="{'color':'white',background:(0==0?color:'#000')}" :class="classObject" @click="go_back">
通过 style 添加样式 对象里面使用三目运算符
</p>
<p :style="styleColor">
绑定data对象
Vue 在data里面显示样式
</p>
<p :style="{color:color,fontSize: fontSize + 'px' }">
变量显示样式 拼接字符串
</p>
数组显示样式
<hr/>
<p :style="[bg,co]">
数组里面显示多个样式
</p>
<p :style="[{color:'white'},{background:(0==0?color:'#000')}]">
数组里面可以有多个对象 三目运算符的用法
</p>
<p>
style 多重值的用法
html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"
</p>
</div>
</template>
<script>
export default{
name:'Style',
data(){
return{
bool:true,
Font_size:{
Font_size:true
},
newbg_red:'bg_red',
color_green:'color_green',
baseclass:'baseclass',
isActive:true,
styleColor:{
color:'red',
textAlign:'center'
},
color:'red',
fontSize:'20',
bg:{
background:'black'
},
co:{
color:'white'
}
}
},
methods:{
},
computed:{
classObject: function () {
return {
active: this.isActive,
}
}
}
}
</script>
<style lang="scss" scoped>
.bg_red{
background: red;
margin-bottom: 10px;
}
.color_green{
color: darkgreen;
}
.Font_size{
font-size:40px;
}
.baseclass{
text-align: center;
}
.active{
text-align: center;
}
</style>
Vue 样式的动态绑定 style class 的相关应用
最新推荐文章于 2024-03-17 12:22:11 发布