vue中与class/id相关知识点

这段时间在写业务代码时，遇到很多和样式属性相关的问题，下面是我自己遇到并总结的vue中的class/id相关知识。

1.根据A的值，判断使用B属性还是C属性

<div :id="[ A ? 'B' : 'C']"></div>

如果变量A的值为true，则id='B';否则id='C'

2.属性为动态变量，并通过document.getElementById()/document.getElementsByClsaaName()获取这个动态变量

<div :id="A"></div>

document.getElementById(''+this.A)
//this.A 为一个变量，前面需用空字符串拼接

3.通过ref绑定，在methods中动态改变样式

<div class="fileUp" ref="fileUp"></div>

this.$refs["fileUp"].style.width = "456px"
this.$refs["fileUp"].style.height = "calc(100% - 80px)"

用ref绑定名为"fileUp"的标签，更改该标签样式

---

2021-12-16补充 1.动态class对象：

<div :class="{'is-active':true, 'red': isRed}"></div>

2.动态class数组：

<div :class="['is-active', isRed ? 'red' : '' ]"></div>

3.动态style对象：

<div :style="{color: textColor, fontSize: '18px'}"></div>

4.动态style数组：

<div :class="[{color: textColor, fontSize: '18px'}, {fontWeight: '300'}]"></div>