vue中动态绑定css和style

閉丄眼聆厛倖輻

于 2021-08-03 19:57:41 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_52005030/article/details/119357855

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了在Vue.js中如何使用不同的方式动态地更改元素的样式和绑定样式。包括使用三元表达式切换类名、布尔表达式条件绑定类名、数组绑定多个类名以及动态绑定内联样式等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们需要动态的改变view中样式的时候:

<template>
  <div class="">
    <!-- 第一种: 可以写成三元表达式切换-->
    <div :class="first"></div>

    <!-- 第二种 :当为true时显示-->
    <div :class="{ classA: hasClassA, classB: hasClassB }"></div>

    <!-- 第三种 -->
    <div :class="['classA', 'classB']"></div>

    <!-- 还有style动态绑定 -->
    <h2>2. style绑定</h2>
    <div :style="{ color: activeColor, fontSize }">
      :style="{ color: activeColor, fontSize: fontSize + 'px' }"
    </div>

    <!-- 切换 -->
    <button @click="update">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 第一种
      first: "classA",
      // 第二种
      hasClassA: true,
      hasClassB: false,
      // style
      activeColor: "red",
      fontSize: "20px",
    };
  },
  methods: {
    update() {
      this.myClass = "classB";
      this.hasClassA = !this.hasClassA;
      this.hasClassB = !this.hasClassB;
      this.activeColor = "yellow";
      this.fontSize = "30px";
    },
  },
};
</script>
<style >
/* 第一种 */
.classA {
}
/* 第二种 */
.classA {
}
.classB {
}
</style>