标签：style vue 绑定 运算符 123 数组 class
绑定style
<!-- 基本使用 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">基本使用</div>
<!-- 数组 -->
<div :style="styleArr">123</div>
<div :style="[astyle, bStyle]">123</div>
<div :style="[{display:(activeName=='first'?'flex':'none')},{fontSize:'20px'}]">123</div>
data () {
return:{
styleArr: [
{
fontSize: '30px',
color: '#ff0000'
},
{
fontStyle: 'italic'
}
],
astyle: {
color: 'red',
fontSize: '20px'
},
bStyle: {
background: '#00BC9C'
}
}
}
<!-- 三目运算符 -->
<div :style="{ color : (index === 0 ? conFontColor : '#ddd')}"></div>
<div :style="[{color:(index==0?conFontColor:'#ddd')},{fontSize:'22px'}]"></div>
绑定class
<!-- 基本使用 -->
<div :class="active">基本用法</div>
<!-- 普通对象方式 -->
<h1 :class="{'success':isSuccess}">普通对象方式 !</h1>
<h1 :class="{'success': aStyle === 'a' }">hello world !</h1>
<!-- 可以控制多个 -->
<h1 :class="{'success':isSuccess,'backgroundStyle':addBackground}">hello world !</h1>
<!-- 数组三元运算符方式 -->
<h1 :class="[isSuccess ? 'success' : 'error' ]">数组方式三元运算符!</h1>
<h1 :class="[isSuccess ? 'success' : 'error', 'abc' ]">数组方式三元运算符!</h1>
<!-- 数组与对象结合，前面对象里的第一个参数可以不带引号 -->
<h1 :class="[{success:isSuccess},'backgroundStyle']">数组对象结合!</h1>
标签：style,
vue,
绑定,
运算符,
123,
数组,
class
From： https://www.cnblogs.com/rzl795/p/17603985.html