在vue里边想要实现点赞功能,也就是点一下图片换成另外一张,再点一下切换回来,如此循环。

来回切换的功能最简单的办法就是用v-if v-else指令了。

具体操作:先写两个img标签,同时绑定点击事件:@cilck="xxx()",

第一个img标签:写上v-if="i%2!==0",也就是说当i为奇数时,显示该图片,src属性把灰色的图片地址写上;

第二个img标签:写上v-else,也就是说当i为偶数时,显示该图片,src属性把红色的图片地址写上。

然后再data函数里边定义变量i默认值为1.

最后再methods里边写事件函数:

xxx(){

 this.i++;

}

 

 

下面是代码:

如何实现点赞按钮图片切换

如何实现点赞按钮图片切换

如何实现点赞按钮图片切换

 

 

================================================================================

还有另外一种办法就是用原生DOM来写

代码图:

如何实现点赞按钮图片切换

效果图:

如何实现点赞按钮图片切换

相关文章:

  • 2021-08-16
  • 2021-10-19
  • 2022-12-23
  • 2021-11-12
  • 2021-07-01
  • 2021-12-07
猜你喜欢
  • 2021-08-08
  • 2021-09-16
  • 2021-04-18
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案