javascript - 使用 Vue.js 的动态样式

Question

我想使用 Vue.js 动态添加和删除样式 pointer-events:none; 属性:

new Vue({
  el: '#el',
  data: {
    toggled: false
  },
  methods: {
    toggle: function () {
      this.toggled = !this.toggled;
    },
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="el">
  <!-- The style disables all mouse events in the div -->
  <div style="pointer-events:none;">
    ...
  </div>
  <button v-on:click="toggle">Toggle click</button>
</div>

我应该怎么做？

Answer 1

new Vue({
  el: '#el',
    data: {
       toggled: false
    },
    methods: {
      toggle: function () {
        this.toggled = !this.toggled;
      },
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="el">
  <!-- The style disables all mouse events in the div -->
  <div :style="{ 'pointer-events': toggled ? 'none' : null }">
    ...
  </div>
  <button v-on:click="toggle">Toggle click</button>
</div>

您的<button>位于 #el 之外，导致它无法被Vue解析。