全部设置为仅查看/可编辑【第三种方法:computed】
<template> <div class="my-radio"> <ul> <li v-for="item in list" :key='item.id'> <div class="name"> <span>{{item.userName}}</span> </div> <van-radio-group v-model="item.operationType" direction="horizontal"> <van-radio :name="1">仅查看 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-radio> <van-radio :name="2">可编辑 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-radio> </van-radio-group> </li> </ul> <div class="set-all"> <van-checkbox v-model='allReadonly'>全部设置为仅查看 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-checkbox> <van-checkbox v-model='allEditable'>全部设置为可编辑 <template #icon="props"> <div :class="props.checked ? 'activeIcon' : 'inactiveIcon'"><span></span></div> </template> </van-checkbox> </div> </div> </template> <script> export default { data() { return { list: [ { id: 266, operationType: 2, userName: 'brandotest3' }, { id: 267, operationType: 1, userName: 'brandotest4' }, { id: 268, operationType: 2, userName: 'brandotest5' }, { id: 269, operationType: 2, userName: 'brandotest6' } ] } }, computed: { allReadonly: { get() { return ( this.list.length && this.list.every((item) => item.operationType === 1) ) }, set(val) { this.list.forEach((item) => { this.$set(item, 'operationType', val ? 1 : '') }) } }, allEditable: { get() { return ( this.list.length && this.list.every((item) => item.operationType === 2) ) }, set(val) { this.list.forEach((item) => { this.$set(item, 'operationType', val ? 2 : '') }) } } } } </script>
通过computed的get方法可以监听到list的变化,修改底部两个按钮的状态
通过set方法可以根据底部按钮的状态,修改list的状态
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结