从 svg 图像中删除类，vue js答案

【问题标题】：removing class from svg images, vue js从 svg 图像中删除类，vue js
【发布时间】：2020-08-28 17:22:54
【问题描述】：

我在从 svg 图像中删除特定类时遇到问题，我在 jsfiddle 中简化了我的代码

当我点击图像时，它会得到特定的类，但我无法通过重置按钮删除该类

html

  <div id="app">
      <img src = "https://simplemaps.com/static/demos/resources/svg-library/svgs/world.svg" class = "img-fluid" style= "width: 200px;" @click = "tap($event)">
    </div><!-- there are some images, just to clarify, I simplified my code -->
    <!-- when i click on image it gets particular class but i cant remove that very class by reset button -->
    
    <button @click = "reset">
    reset
    </button>

css文件

.colorFilter{
   filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(58%) contrast(139%);
}

vue

new Vue({
  el: "#app",
  data: {
   
  },
  methods: {
    tap(event){
            event.target.classList.add('colorFilter');
    },
    reset(){
        const imgz =  document.getElementsByTagName('img');
      imgz.classList.remove('colorFilter');// i cant reset the images
    }
  }
})

谢谢

【问题讨论】：

您也可以使用动态类绑定，更多信息请参阅此参考vuejs.org/v2/guide/class-and-style.html#Object-Syntax
感谢您的回答@Tanvir，但根据文档，如果我将 true 分配给 isActive，所有图像都会获得该类，但我只希望点击的图像获得该类而不是所有图像跨度>
为每个图像分配一个唯一的 id 并通过方法参数发送 ut ，然后检查您传递的 id == 图像 id 和 isActive 是否为真 ,,,,如果满足条件然后分配类否则不

标签： laravel vue.js vuejs2 vue-component

【解决方案1】：

您正在使用 document.getElementsByTagName，它返回一个元素数组。

使用 document.getElementsByTagName('img')[number] 从该列表中获取特定元素。

【讨论】：

有几个图像，我想从所有图像中删除该特定类
我仔细看了你的小提琴。您的按钮必须在“#app”容器内，因为这是 vue 正在监听的那个。其次，如果您想从多个元素中删除该特定类，那么您可以为此使用 for 循环。（使用 document.querySelectorAll('img.colorFilter') 获取元素）
谢谢，我用for循环删除了类，非常感谢，this.tags = document.getElementsByTagName('img');//我在数据中初始化了一个可变的命名标签 for(var i = 0; i

【解决方案2】：

<button @click="reset">reset</button> 在<div id="app"> 之外，而@click 是v-on:click 的快照手，这就是为什么 vue 不知道按钮何时被点击

new Vue({
  el: "#app",
  data: {
    mapActive: false
  },
  methods: {
    tap(){
            this.mapActive = !this.mapActive
    },
    reset(){
        this.mapActive = false
    }
  }
})

.colorFilter{
   filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(58%) contrast(139%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img src = "https://simplemaps.com/static/demos/resources/svg-library/svgs/world.svg" :class="['img-fluid', { 'colorFilter': mapActive }]" style= "width: 200px;" @click = "tap()">
  <button @click = "reset">
reset
</button>
</div>

【讨论】：

感谢您的回答@Aslam，但是当我点击触发点击方法的图像时，所有图像都变成绿色，我只想点击图像变成绿色，而不是全部变成绿色，而是带有重置按钮我想从所有图像中删除 colorFilter 类，我对我的小提琴做了一些更改