vue中radio或者checked如何默认选中？

最新推荐文章于 2025-06-24 13:58:12 发布

Null_Bugs

最新推荐文章于 2025-06-24 13:58:12 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Null_Bugs/article/details/79732286

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍在VUE框架下如何正确处理Checkbox和Radio的不同应用场景，特别是当需要将选项值放入数组时，Checkbox与Radio的行为差异。通过具体代码示例展示了如何设置属性和数据绑定。

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

 attrList数据：

[         
  {
    propertyValueId: 1,
    valueData: "sku1 text alias"
  },
   {
    propertyValueId: 2,
    valueData: "sku1 text alias"
  },
   {
    propertyValueId: 3,
    valueData: "sku1 text alias"
  }
]

 <ul>
    <li class="item" v-for="item in attrList">
        <input :type="inputClass"
               :class="inputClass"
               :id="getId()"
               :value="item.propertyValueId"
               v-model="checkedList">
        <label :for="getId(false)" :title="item.valueData">{{ item.valueData}}</label>
    </li>
</ul>
                
data() {
    return {
        checkedList: this.inputType === global.INPUT_TYPE.CHECK_BOX ? [] : this.propertyValueId
    }
},            
   

 computed: {
        // checkbox or radio
        inputClass() {
            return this.inputType === global.INPUT_TYPE.CHECK_BOX ? 'checkbox' : 'radio'
        }
    }