使用 VueJS 条件应用类

Posted 2023-02-23

【中文标题】使用 VueJS 条件应用类

【英文标题】：Apply an Class by using VueJS condition

【发布时间】：2020-07-02 22:13:21

【问题描述】：

我正在尝试使用 VueJS 条件将 class 应用于 <p> 标记，但它根本不起作用，尽管它在 JSfiddle 上工作。我卡住了3天了，请帮帮我。

VueJS（在 main.js 中）

new Vue(
  el: "#test",
  data: 
    selected: "2"
  
);

html (App.vue)

<div id="app">
  <div id="test">
     selected 
    <p :class=" selection: 1 === selected ">
      heyyy 1
    </p>
    <p :class=" selection: 2 == selected ">
      heyyy 2
    </p>
    <button @click="selected = 2">Switch</button>
  </div>
</div>

【问题讨论】：

你确定你在本地使用与 JSFiddle 相同的代码吗？需要注意的是，如果类名是 kebab 大小写（由连字符分隔）并且您没有在 VueJS 中将它们括在引号中，则不会应用类。要结束，您需要将类名括在单引号中，如 anand vikram singh 所回答。

【参考方案1】：

我假设您使用的是 Vue-CLI，因为您有一个 .vue 文件，但您的 main.js 使用的是来自 Vue CDN 的语法。也许你从小提琴中复制了代码。

我也假设你有一个名为 .selection 的 CSS 类，它可以工作。

无论哪种方式，App.vue 都有自己的组件实例，不是main.js 安装实例（它更深一层）。您的代码在安装根目录中创建 selected 而不是 App.vue。

要修复，请在 App.vue <script> 部分创建它：

<template>
<div id="app">
  <div id="test">
     selected 
    <p :class=" selection: 1 === selected ">
      heyyy 1
    </p>
    <p :class=" selection: 2 == selected ">
      heyyy 2
    </p>
    <button @click="selected = 2">Switch</button>
  </div>
</div>
</template>

<script>
export default 
  data() 
    return 
      selected: "2"
    
  

</script>

<style>
.selection 
  /* CSS */

</style>

【参考方案2】：

要在 VueJs 中应用类绑定，您可以将其用作：

:class=" 'selection(your class name here)': selected === 1"

【讨论】：

感谢您的帮助，但“选择”实际上已经是我的班级了。

仔细看我的语法和你的语法@Hamza，我在''里面写了类名