当前位置：首页 > news >正文

设计网站页面注意事项山东网页制作网站

news 2025/9/17 6:14:47

设计网站页面注意事项,山东网页制作网站,goole官网,网站制作手机一、实现效果： 二、代码实现： 不适用官方的change方法，自己定义点击方法。动态判断定义的值是否等于遍历的值进行回显，如果和上一次点击的值一样，就把定义的值改为null <template><view><radio-group&…

一、实现效果：

在这里插入图片描述

二、代码实现：

不适用官方的change方法，自己定义点击方法。
动态判断定义的值是否等于遍历的值进行回显，如果和上一次点击的值一样，就把定义的值改为null

<template><view><radio-group><view v-for="(item, index) in list" :key="index"><radio :value="item.id" :checked="item.id==radioValue" @click="radioCheck(index)"></radio><view>{{item.value}}</view></view></radio-group></view>
</template><script>export default {data() {return {list: [{value: '选项1',id: '1'},{value: '选项2',id: '2'},{value: '选项3',id: '3'}],radioValue: ''}},methods: {//自定义单选按钮的点击方法radioCheck(index) {this.list.forEach((item => {item.isCheck = false}))if (this.radioValue == this.list[index].id) {this.radioValue = null} else {this.radioValue = this.list[index].id}console.log(this.radioValue)}}}
</script>