2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

vue.js实现点击图片切换图片

前端javascript作者:猿2048志愿者

为啥这个方法行不通,本来想的是点击了那个灰色的爱心变成红色,结果点了之后图标都不见了。而且其它的爱心图标点了也没反应。。。奇了怪了,我其它地方用了mui的框架,是不是有影响

clipboard.png

点了之后变成这样

clipboard.png

这是这个界面的代码
<template>

<div class="Div">
    <div>
        <ul>
            <li><div class="divc"><img src="../../assets/1.jpg" alt=""></div>我的能量很少的,心也小小的<div class="adiv">
            <div class="divi"><img src="../../assets/喜欢.png" alt="" id="btn" @click="onclik"></div></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/2.jpg" alt=""></div>地球到星星没有捷径<div class="adiv">
            <div class="divi"><img src="../../assets/喜欢.png" alt="" id="btn" @click="onclik"></div></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/3.jpg" alt=""></div>没有一种爱不需要培养<div class="adiv">
            <div class="divi"><img src="../../assets/喜欢.png" alt="" id="btn" @click="onclik"></div></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/4.jpg" alt=""></div>有件事似乎已被我遗忘很久了。<div class="adiv">
            <div class="divi"><img src="../../assets/喜欢.png" alt="" id="btn" @click="onclik"></div></div></li>
            <li><div class="divh"></div></li>
            <li class="divc2"><div class="divc"><img src="../../assets/5.jpg" alt=""></div>都是捕风,都是虚空<div class="adiv">
            <div class="divi"><img src="../../assets/喜欢.png" alt="" id="btn" @click="onclik"></div></div></li>
        </ul>
    </div>

    <daohang></daohang>
</div>

</template>
<script>

export default{
    data(){
        return{}
    },
    methods:{
        onclik(){
            var imgObj = document.getElementById('btn');
            if(imgObj.getAttribute("src")=="../../assets/喜欢.png"){
                imgObj.src="../../assets/喜欢2.png"
            }else{
                imgObj.src="../../assets/喜欢.png"
            }
        }
    }
}

</script>
<style scoped>
.Div{

margin:0 auto;
border: 0;
position: relative;
width: 100%;
background-color: white; 

}
.divc{

width: 100%;
left: 0;

}

.adiv{

text-align: right;
padding-right: 20px;
margin-top: 8px;

}
.divh{

height: 2px;
background-color: #EAEAEA;

}
img{

max-width: 100%;
max-height: 100%;

}
ul{

list-style:none;

}
li{


margin-bottom: 10px;
font-size: 12px;
color: dimgrey;
text-align: center;

}
.divc2{

margin-bottom:51px;

}
.divi{

margin-right: 10px;

}

评论
点击刷新
评论
相关问题
×添加代码片段