:style 静态、动态样式绑定，动态修改伪元素样式

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

一、静态绑定内联样式

1、对象语法

方法一、配合data，直接绑定值

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

使用模版字符串绑定

<div :style="{ borderRadius: `${borderRadius}px` }"></div>
//或者字符串拼接
<div :style="{ border: '1px solid ' +  borderColor}"></div>

data() {
  return {
    borderRadius: 30,
    borderColor: '#01b4e0'
  }
}

方法二：绑定data中定义的对象styleObject（直接绑定到一个样式对象通常更好，这会让模板更清晰）

<div :style="styleObject"></div>

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

方法三：循环动态展示

 <div v-for="i in 10" :style="{fontSize:i*10+'px'}">{{i}}</div>

方法四：绑定多个属性，第一个属性的值是我们在data中定义的inColor属性，第二个属性直接绑定一个值

 <div :style="{color: activeColor,fontSize:30+'px'}">red</div>

方法五：对象语法也可以结合计算属性来使用，还可以通过改变对应的值来改变样式

<div :style="boxStyle"></div>
<button  @click="change" type="button">改变Box大小</button>
	
data(){
    return{
    	boxWidth:'100px',
    	boxheight:'100px',
    	boxBorder:'1px solid red'
    }
},
methods:{
    change(){
    	this.boxWidth = '200px',
    	this.boxheight = '200px',
    	this.boxBorder = '2px solid black'
    },
},
computed:{
    boxStyle(){
    	return{
    		width:this.boxWidth,
    		height:this.boxheight,
    		border:this.boxBorder
    	}
    }
},

2、数组语法

:style 的数组语法可以将多个样式对象应用到同一个元素上（数组里面的值为定义的样式对象）

<div :style="[baseStyles, overridingStyles]"></div>

<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

3、三元运算符

//对象写法
<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>
//数组写法
<div :style="[{float: id === '12' ? 'left:'right}]"></div>
//字符串写法
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div>
//直接赋值，值用字符串包起来
:style="[{height:(warnData.length > 0?'calc(100% - 54px - 42px)':'calc(100% - 54px)')},{color:'#fff'}]"

4、多重值

常用于提供多个带前缀的值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

二、动态绑定、 var(–自定义命名) 、修改伪元素样式

我们在对应的样式处，通过 var(–自定义命名) 的方式定义变量（括号里面是两条杠，别写错了），在vue的标签处通过 ‘–var中定义的命名’: data定义中对应的样式变量 就可以改变对应的样式

以下案列是：根据变量不同，a标签的：hove展示不同的颜色；

// 这里用三元运算符，根据变量赋值不同的变量
<a :style="id == 23 ? bannerStyle1 : bannerStyle2" :href="href">{{title}}</a>

//在data里定义，定义后可以在方法里重新赋值
data(){
    return{
        bannerStyle1: {
            "--setColor": '#01b4e0'
        },
        bannerStyle2: {
            "--setColor": '#a697ed',
        },
    }
},

//样式里使用
a:focus， a:hover {
    color: var(--setColor);
}