时间戳

首页 > 解决方案 > vue.js: ":class" 导致 classList 错误

vue.js - vue.js: ":class" 导致 classList 错误

问题描述

像这样很酷

'<div class="item" :class="{'editable':canEdit}"></div>';
  1. 将'canEdit'设置为false-----'div'的类是“item”
  2. '$("div").addClass("on")' ------'div'的类是"item on"
  3. 将 'canEdit' 设置为 true -------- 'div' 的类是“项目可编辑”

问题：为什么“div”的类不是“可编辑的项目”

标签： vue.jsvuejs2

解决方案

因为您没有使用 Vue 向元素添加类。所以 Vue 不知道你已经向元素添加了一个新类。

请参阅此示例，其中我添加了一个不使用 Vue 的类：

new Vue({
  el: '#app',
  template: `
    <div>
      <div ref="e" class="a" :class="{ b: b }"></div>
      <button @click="toggleB">Toggle B</button>
      <button @click="addC">Add C</button>
    </div>
  `,
  data(){
    return {
      b: true
    }
  },
  methods: {
    toggleB(){
      this.b = !this.b;
    },
    addC(){
      this.$refs.e.classList.add('c');
    }
  }
});
.a {
  width: 100px;
  height: 100px;
}

.b {
  border: 1px solid black;
}

.c {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app"></div>

现在，如果我使用 Vue 向它添加类，它将起作用，因为现在 Vue 知道：

new Vue({
  el: '#app',
  template: `
    <div>
      <div class="a" :class="{ b: b, c: c }"></div>
      <button @click="toggleB">Toggle B</button>
      <button @click="addC">Add C</button>
    </div>
  `,
  data(){
    return {
      b: true,
      c: false
    }
  },
  methods: {
    toggleB(){
      this.b = !this.b;
    },
    addC(){
      this.c = true;
    }
  }
});
.a {
  width: 100px;
  height: 100px;
}

.b {
  border: 1px solid black;
}

.c {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app"></div>

推荐阅读