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无法对其进行解析。

Answer 2

要动态更改HTML组件的样式，可以基于数据值将类分配或删除给定组件，例如：

<template>
   <div @click="toggleData=!toggleData">Click to toggle</div>
   <div :class="[toggleData ? 'classA' : 'classB']"></div>
</template>

<script>
export default {
  data() {
    return {
      toggleData: false,
    };
  },
</script>

<style>
.classA{
  pointer-events:none;
}
.classB{
    pointer-events:auto;
}
</style>

Answer 3

您可以使用返回对象的计算属性，其中key表示属性，value表示css属性值。这是使用计算属性的示例-

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


computed:{
    dynamicStyleObject:function(){
       // Conditionally return object in the following format -
       return {
          'pointer-events' : 'none',
          'some-other-property' : 'some-value'
       };
    }
}

使用计算属性非常方便，因为每当组件的数据发生更改时，dynamicStyleObject就会相应地自动更改。

Answer 4

我认为您正在寻找类似的东西

ENV LANG C.UTF-8

<template>
  <div>
      <h1 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Text </h1>
      <button @click='condition = true'>Click me</button>
  </div>
</template>

Vue.js的动态样式

4 个答案: