javascript - 使用 VueJS 条件应用类

Question

我正在尝试申请 class到 <p>使用 VueJS 条件标记，但它根本不起作用，尽管它在 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

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

我也假设您有一个名为 .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>