javascript 如何在vue js中使用活动类

j2datikz 于 2023-01-24 发布在 Java

关注(0)|答案(3)|浏览(91)

我试图在组件处于活动状态时更改文本颜色。

这是我的模板

<div
  v-if="enabled2FAs.includes('phoneOtp')"
  @click="otpType = 'phoneOtp'"
  >
  <div
    :class="[isActive ? activeClass: 'red',]">
    Phone OTP
  </div>
</div>
<div
  v-if="enabled2FAs.includes('authenticatorApp')"
  @click="otpType = 'authenticatorApp'"
  >
  <div
    :class="[isActive ? activeClass: 'red',]">
    Phone OTP
  </div>
</div>

我的脚本标记-

<script>
export default {
  data() {
    return {
      isActive: true,
    };
  },
 
};
</script>

请问我该怎么办

JavaScript

来源：https://stackoverflow.com/questions/75203344/how-to-use-active-class-in-vue-js

3条答案

按热度按时间

myzjeezk1#

请观看演示，并在vue class/style bindings上阅读更多信息

const app = Vue.createApp({
  data() {
    return {
      isActive: true,
    };
  },
})
app.mount('#demo')

.red {
  color: red;
}
.green {
  color: green;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="isActive = !isActive">toggle</button>
  <div :class="!isActive ? 'red' : 'green'">
    Phone OTP
  </div>
</div>

赞(0）回复(0）举报 2023-01-24

cvxl0en22#

使用字符串插值

<div :class="`${isActive ? activeClass : 'red'}`">
    Phone OTP
</div>

这允许您在将来添加非动态类

赞(0）回复(0）举报 2023-01-24

qfe3c7zg3#

根据documentation，有多种变通方法可以实现这一点，其中之一是绑定到对象。

<div :class="classObject"></div>

并且按照逻辑，您可以在计算属性的帮助下动态更新它.

data() {
  return {
    isActive: true
  }
},
computed: {
  classObject() {
    return {
      'activeClass': this.isActive,
      'red': !this.isActive
    }
  }
}

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何在vue js中使用活动类

3条答案

相关问题

热门标签

最新问答