vue中动态绑定css和style

本文介绍了在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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值