实现单选功能

html:

html 复制代码
<view class="list" v-for="(item,index) in listInfo" :key="item.dlsNo" @click="selectClick(item,index)">
	<view class="radio" :class='{active :item.radio == 1}'></view>
	<view class="ct">
	    <text>{{item.name}}</text>
	    <view>代理商编号:{{item.dlsNo}}</view>
	    <view>手机号:{{item.phoneNum}} <text>{{item.shName}}</text></view>
	</view>
</view>

js:

javascript 复制代码
<script>
export default {
  data() {
    return {
      listInfo: [
        {
          name: '乔一封',
          dlsNo: '3748723891',
          phoneNum: '13234445445',
          shName: '河南郑州',
          radio: 2,
        },
        {
          name: '张三',
          dlsNo: '3748723824',
          phoneNum: '13234445445',
          shName: '河南郑州',
          radio: 2,
        },
        {
          name: '李四',
          dlsNo: '3748723394',
          phoneNum: '13234445445',
          shName: '河南郑州',
          radio: 2,
        }
      ]
    };
  },
  methods: {
    updateRadio(row,index) {
        console.log(row)
      // 将点击的列表项的 radio 值设置为 1
      // 同时将其他列表项的 radio 值设置为 2
      this.listInfo.forEach((item, i) => {
        if (i === index) {
          item.radio = 1;
        } else {
          item.radio = 2;
        }
      });
    }
  }
};
</script>

效果:

相关推荐
Orange_sparkle6 分钟前
若依使用基本步骤
java·vue
WebDesign_Mu12 分钟前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
kevinfkq14 分钟前
Java-idea编辑器中Jar方式打包启动
java·intellij-idea·jar
@PHARAOH27 分钟前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了28 分钟前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER29 分钟前
Web 开发 30
前端·笔记·后端·学习·web
学编程的小虎29 分钟前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
Jonathan Star33 分钟前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
€81136 分钟前
Java入门级教程23——配置Nginx服务器、轻量级HTTP服务开发、前后端分离实现完整应用系统
java·开发语言·仓颉·生成验证码
做好一个小前端1 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html