使用 VueJS 条件应用 Class

Question

我正在尝试使用 VueJS 条件将 class 应用于 <p> 标记，但它根本不起作用，尽管它在 JSfiddle 上工作。卡了三天了，求大神指点。

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>

Answer 1

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

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

Answer 2

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

我也假设您有一个名为 .selection 的 CSS class 才能正常工作。

无论哪种方式，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>

使用 VueJS 条件应用 Class

Apply an Class by using VueJS condition

javascript

vue.js

vue-component

vuejs2

vue-cli