1.

写在methods里, :style动态绑定方法返回的属性

<div>
	<span class="res" v-for="(data, index) in data" :key="index">
	<!-- 当传不同的值时会渲染出不同颜色的方块 -->
    <span :style="giveColor(data)">
         {{index + 1}}
     </span>
 </span>
</div>

// 定义一个数组, 放所有可能的颜色, 用swatch来判断返回那种颜色, return后不要用background-color, 要转换成backgroundColor驼峰,属性对应的的值要用引号包裹
 giveColor(num) {
        let colorArray = ["green", "red", "white", "yellow"];
        let color = "";
        switch (num) {
            case 1:
              color = colorArray[num - 1];
              break;
            case 2:
              color = colorArray[num - 1];
              break;
            case 3:
              color = colorArray[num - 1];
              break;
            case 4:
              color = colorArray[num - 1];
              break;
        }
        return {
            display: "inline-block",
            width: "100%",
            height: "100%",
            backgroundColor: color,
        };
      }

2.

放在data()里

<div>
	<span class="res" v-for="(data, index) in data" :key="index">
	<!-- 直接绑定 -->
    <span :style="styleData">
         {{index + 1}}
     </span>
 </span>
</div>

export default {
    data() {
      return {
        styleData: {
          display: "inline-block",
          width: "100%",
          height: "100%",
          backgroundColor: "red",
        }
   	  }
    }
}

其他情况应变就好, 不管怎样记得属性要驼峰, 值用引号包裹

最后

以上就是幸福雪碧为你收集整理的Vue动态更改/设置元素样式1.2.的全部内容，希望文章能够帮你解决Vue动态更改/设置元素样式1.2.所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。