vue Radio自定义图片

最新推荐文章于 2024-10-10 00:22:48 发布

火火火火_Shy

最新推荐文章于 2024-10-10 00:22:48 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/yangmy_Shy/article/details/96107995

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Vue中自定义Radio按钮的样式，并通过JavaScript处理点击事件。使用CSS创建独特的Radio样式，HTML结构包括v-for循环遍历数据，并用JavaScript的v-model和事件处理函数实现选中状态的同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css：

.radioStyle {
    display:inline-block;
    width: .24rem;
    height: .24rem;
    background: url("img/radio_icon.png")0 -0.34rem no-repeat;background-size: 100%;
    margin-right: 0.2rem;
}
.radioStyleChecked {
    background: url("img/radio_icon.png")0 0 no-repeat;
    background-size: 100%;
}

html:

<div class="app">
    <div class="radio-box" v-for="(item,index) in radios" :key="item.id">
        <span class="radioStyle" :class="{'radioStyleChecked':item.isChecked}" @click="huoqu(index)"></span>
        <input v-model="sex" :value="item.value" class="input-radio" :checked='item.isChecked' type="radio"             style="display: none">{{item.label}}
    </div>
</div>

js:

<script>
    var vm = new Vue({
        el:".app",
        data:{
            sex: '男',
            radios:[
                {
                    label: '男',
                    value:'男',
                    isChecked: false,
                },
                {
                    label: '女',
                    value:'女',
                    isChecked: false,
                }
            ]
        },
        methods:{
            huoqu(index){
                // 先取消所有选中项
                this.radios.forEach((item) => {
                    item.isChecked = false;
                });
                //再设置当前点击项选中
                this.sex = this.radios[index].value;
                // 设置值，以供传递
                this.radios[index].isChecked = true;
            },
        }
    });

</script>