vue.js 实现图片单选功能

最新推荐文章于 2024-12-18 09:21:04 发布

博博博啊

最新推荐文章于 2024-12-18 09:21:04 发布

阅读量5.8k

点赞数 5

分类专栏：前端文章标签： vue.js vue单选功能前端

本文链接：https://blog.csdn.net/qq_37842366/article/details/96976608

版权

vue.js 实现图片点击选中，再次点击取消，每次只能选择一张图片（单选功能）

1. 效果展示

在这里插入图片描述

2. HTML部分

本实例主要用v-on与v-bind绑定的点击事件实现，
首先解释一下v-on与v-bind：
v-on: 用来监听 DOM 事件，并在触发时运行一些 JavaScript 代码;
v-bind: 用来响应地更新 HTML 属性。

<div class="circle">
  <ul class="circle-ul">
    <li v-for="(item) of classList" :key="item.id" class="circle-li">
      <div v-on:click="changeList(item.id)" v-bind:class="{changeBorder:item.id==a}" value="change!">
        <img :src="item.coverImg" style="width: 100px;height: 100px;padding-top: 5px;" alt />
        <div class="topic-shade">
          <div class