html代码

<radio-group>
    <label v-for="(item, index) in List" :key="index">
        <radio :class="active == index ? 'checked' : ''" :checked="active== index" :value="index" @click="radioChange(index)"/>
    </label>
</radio-group>

js代码

export default {
    data() {
        return {
        	// 演示数组
            List: [{
                id: '1',
                price: 100.00,
                name: '商品1'
            }, {
                id: '2',
                price: 200.00,
                name: '商品2'
            }],
            active: null // 选中的序号
        }
    },
    methods: {
        radioChange(index) {
            if (this.active== index) { // 如果已经选中,则取消选中
                this.active= null;
            } else { // 否则进行选中赋值
                this.active= index;
            }
        }
    }
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐