如何解决从svg图像中删除类,vue js
我在从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
}
}
})
谢谢
解决方法
您正在使用document.getElementsByTagName返回一个元素数组。
使用document.getElementsByTagName('img')[number]从该列表中获取特定元素。
, <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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。