vuejs如何实现点击来回切换背景图片?

clipboard.png

clipboard.png
最左面的选中状态,点一下背景换成粉色,再次点击背景换成白色圆圈

阅读 20.5k
4 个回答
v-bind:class="{ active: item.isActive } v-on:click="doSomething"

active是样式名,内容是红色背景.
item.isActive在data中,为布尔值。
doSomething在methods中,对item.isActive取反.

  1. 首先这是个通过checkbox的css就能实现的问题,完全不需要js

  2. 实在想用js,可以给这个元素添加click事件,通过toggle class的方式实现

vue中的倾向用状态去确定元素的是否展示。
1.你设置一个是否选中状态值,isActive=false
2.根据isActive的值去写最左边的是否选中的class

代码2楼已经讲得很清楚的,希望楼主理解状态驱动视图这个概念。

isActive的状态改变,视图也发生不同的改变。

代码层面则是,根据状态的值,写不同的逻辑。

为什么v-hide会报错啊

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏