模板中的 VueJS 绑定 class 不起作用

Question

我正在学习 VueJS，我想制作选项卡组件。我有一个 main.js 和 index.html 文件如下：

Vue.component('tabs', {
  template: "<div><div class='tabs is-medium'><ul><li v-for='tabb in tabs' :class='{'is-active': tabb.selected}'><a href='#'>{{ tabb.name }}</a></li></ul></div><div class='tabs-details'> <slot></slot></div></div>",
  data() {
    return {tabs: []};
  },

  created() {
    this.tabs = this.$children;
  }
});

Vue.component('tab', {
  template: '<div><slot></slot></div>',
  props: {
    name: {required: true },
    selected: { default: false }
  }

})

new Vue({
  el: '#root'

});

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">

  </head>
  <body>
  
    <div id="root">

      <tabs>
        <tab name="Tab1" :selected="true">
          <h1>Tab1 content</h1>
        </tab>

        <tab name="Tab2">
          <h1>Tab2 content</h1>
        </tab>

        <tab name="Tab3">
          <h1>Tab3 content</h1>
        </tab>

      </tabs>
   </div>


  <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

  </body>
</html>

问题出在 class 绑定部分 (:class='{'is-active': tabb.selected}')。代码在删除或未使用绑定且 class 值保持不变 (class='is-active') 时有效。我想知道为什么绑定 class 不起作用？

注意：模板中到处都使用单引号，因为它（显然）是我在 Atom 编辑器中将所有内容保留在模板中（因此在“”之间）的唯一方法。

Answer 1

你不能这样写：

:class='{'is-active': tabb.selected}'

您将单引号用于两个不同的目的。 Vue 一遇到第二个 ' 就会认为属性值已经结束。这最终相当于：

:class='{'

通常的约定是对模板使用反引号（不要与单引号混淆），如下所示：

template: `
  <div>
    <div class="tabs is-medium">
      <ul>
        <li v-for="tabb in tabs" :class="{'is-active': tabb.selected}">
          <a href="#">{{ tabb.name }}</a>
        </li>
      </ul>
    </div>
    <div class="tabs-details">
      <slot></slot>
    </div>
  </div>
`,

如果您真的不能使用反引号，那么只需转义一些双引号即可。所以其中之一：

:class=\"{'is-active': tabb.selected}\"

或：

:class='{\"is-active\": tabb.selected}'

模板中的 VueJS 绑定 class 不起作用

VueJS binding class in template not working

javascript

vue.js

bulma