在Vue.js中创建v-model时,默认选择单选按钮可以通过给单选按钮的input元素添加checked属性来实现。具体步骤如下:
下面是一个示例代码:
<template>
<div>
<input type="radio" id="option1" value="option1" v-model="selectedOption" />
<label for="option1">Option 1</label>
<input type="radio" id="option2" value="option2" v-model="selectedOption" />
<label for="option2">Option 2</label>
<input type="radio" id="option3" value="option3" v-model="selectedOption" />
<label for="option3">Option 3</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: 'option1' // 默认选中第一个选项
};
}
};
</script>
在上述示例中,selectedOption变量用于存储选中的选项的值。通过v-model指令将其与单选按钮的选中状态进行双向绑定。通过v-bind指令将checked属性绑定到selectedOption变量,从而实现默认选择单选按钮的功能。
请注意,上述示例中的代码仅为演示目的,实际使用时需要根据具体情况进行调整。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云