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

亚辛

我正在学习 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/[email protected]/dist/vue.js"></script>

  </body>
</html>

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

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

裙摆

你不能这样写：

: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>
`,

如果你真的不能使用反引号，那么就逃避一些双引号。因此，其中之一：