li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）

效果展示

点击全选被全部勾选，再点击则取消勾选(下方还有取消按钮，实现同样功能)。

也可以实现点击的书籍被勾选，再次点击则取消勾选

在功能实现过程中主要是对v-show、v-if、v-else等的灵活运用（自认为比较麻烦，请求大佬指点更加简便的方法）

页面代码如下：

1.首先利用li对booklist列表中的各项进行循环，并对每个li绑定点击事件(@click="checkimg(item, index)"),用来实现点击勾选功能。

2.因为要实现全选或者点击勾选。所以在红色对勾图片设置了两个显示条件(v-if="item.checkit || isCheck")。其中isCheck是全选时的绑定时间，是一个全局的变量。checkit是对应设置的每一个li的点击事件，对应每一个对象的变量。

<ul><liv-show="isdelete"v-for="(item, index) in booklist":key="index"@click="checkimg(item, index)"><img src="图片地址" alt=""/>//点击  编辑 才会显示位于书封面右下角的对勾图标，未演示此功能<div v-show="!exit">//被选中时的红色对勾<img v-if="item.checkit || isCheck" src="@/assets/image/rred.png" alt="" />//未被选中时的灰色对勾<img v-else src="@/assets/image/rgrey.png" alt="" /></div><p>{{ item.name }}</p><p class="process">{{ item.progress }}</p></li>
</ul>

变量设置如下：

1.在未点击时均设置为false。显示的都是为灰色的对勾。

export default {data() {return {//全局部分代码isCheck: false,booklist: [//对象变量设置{name: "关键对话",progress: "2章/15章",checkit: false,},{name: "沟通力",progress: "未读过",checkit: false,},{name: "聪明人是怎样沟通的",progress: "1章/12章",checkit: false,},],}}
}

方法代码部分：

1.实现起来很简单，但是一开始只想到被点击的变红，所以只传回了index参数，所以怎么都无法实现，后来改变想法传回了item得以解决。希望大家看到可以少走弯路，节约时间。(毕竟35岁就要被淘汰，没那么时间浪费......)

methods: {
//对对象的点击绑定的点击事件checkimg(val) {let _num = 0;//方法可以传回两个参数，val为对象本身，index为对象对应位置(此操作用不到)//因为checkit为对象里的变量，需要使用val.checkit才能实现改变val.checkit = !val.checkit;//用来实现点击图片，显示被选中的书的数量this.booklist.forEach((val) => {if (val.checkit) {_num = _num + 1;}});this.num = _num;},
//对于点击全选的点击事件checkall() {//点击时使isCheck取反，因为isCheck为全局变量，所以均会显示为点勾选this.isCheck = !this.isCheck;//此段实现的是点击后会显示对应被勾选的数字，例子中仅有三本书，这里直接写成3if (this.isCheck) {this.num = 3;} else {this.num = 0;}},
}

希望能对大家有一点点帮助，这两天写项目总结的小经验。会继续分享心得，总结经验。争取早日进大厂，成大牛！

前端小白望大家多多指点！！！