input单选框在iphone6手机系统ios10选择bug

34 篇文章 0 订阅

bug描述

input单选框在iphone6手机系统ios10选择bug。
手机在选择的时候竟然可以同时选择多个。代码如下

<label class="label" v-for="(item, index) in values"
            :key="index">
    <input class="input-radio" :value="item.sex"
          :checked="sex === item.sex"
          @input="modifySex(item.sex)" type="radio">{{item.name}}
</label>

input事件

经调查,原来是input事件的问题,mdn上是这么定义的

当一个 <input>, <select>, 或 元素的 value 被修改时,会触发 input 事件。对于 type=checkbox 或 type=radio 的 input 元素,每当用户切换控件(通过触摸、鼠标或键盘)时(HTML5规范),input 事件都应该触发。然而,历史事实并非如此。请检查兼容性,或使用 change 事件代替这些类型的元素。

我这里是一个input元素,在切换选择的时候其实修改的是他的checked属性,他的value按道理会改变,但是没有触发input事件,用change事件代理即可。

修改之后代码

<label class="label" v-for="(item, index) in values"
            :key="index">
   <input class="input-radio" :value="item.sex"
        :checked="sex === item.sex"
       @change="modifySex(item.sex)" type="radio">{{item.name}}
</label>

change事件

change 事件被<input>, <select>, 和<textarea> 元素触发, 当用户提交对元素值的更改时。与 input 事件不同,change 事件不一定会对元素值的每次更改触发。

事件触发取决于表单元素的类型(type)和用户对标签的操作:

  • 当元素被:checked时(通过点击或者使用键盘): 和 ;
  • 当用户完成提交动作时(例如:点击了 中的一个选项,从 标签选择了一个日期,通过标签上传了一个文件,等);
  • 当标签的值被修改并且失焦后,但并未进行提交(例如:对 或者的值进行编辑后。)。

总结

以后注意使用选择类input元素使用change事件较为合理。

### 回答1: 在Vue中,可以使用`<input>`元素的`type`属性设置为"radio"来创建单选框。为了实现单选功能,需要为每个单选框设置相同的`name`属性,但是不同的`value`值,这样它们就可以作为一组进行选择。 首先,需要在Vue的data选项中定义一个变量来存储选中的单选框的值,例如`selectedOption`。 然后,在模板中使用`v-model`指令将选中的值与data中的变量绑定起来,例如`v-model="selectedOption"`。 接下来,使用`v-bind`指令(简写为`:)来绑定每个单选框的`value`属性到不同的值,例如`:value="optionValue"`。 最后,可以使用`v-on`指令(简写为`@`)来监听选中值的变化,例如`@change="handleChange"`。 这样,当用户选择不同单选框时,`selectedOption`的值会自动更新为所选中的单选框的`value`。 例子如下: ```html <template> <div> <input type="radio" name="options" :value="optionValue1" v-model="selectedOption" @change="handleChange"> <label for="option1">选项1</label> <input type="radio" name="options" :value="optionValue2" v-model="selectedOption" @change="handleChange"> <label for="option2">选项2</label> <input type="radio" name="options" :value="optionValue3" v-model="selectedOption" @change="handleChange"> <label for="option3">选项3</label> </div> </template> <script> export default { data() { return { selectedOption: '', optionValue1: '值1', optionValue2: '值2', optionValue3: '值3' }; }, methods: { handleChange() { console.log(this.selectedOption); // 打印选择的值 } } }; </script> ``` 以上是使用`<input>`元素的`type`属性为"radio"创建单选框的方法,可以根据实际需求进行适当调整和扩展。 ### 回答2: 在Vue中,可以通过使用v-model指令来绑定input单选框的值。例如,我们可以创建一个data属性来存储选项的值,然后将其与input单选框绑定: ```html <template> <div> <input type="radio" id="option1" value="option1" v-model="selectedOption"> <label for="option1">选项1</label> <br> <input type="radio" id="option2" value="option2" v-model="selectedOption"> <label for="option2">选项2</label> <br> <input type="radio" id="option3" value="option3" v-model="selectedOption"> <label for="option3">选项3</label> </div> </template> <script> export default { data() { return { selectedOption: "" // 初始化选项值为空 }; } }; </script> ``` 在上面的例子中,我们创建了三个单选框选项,并将它们的值分别设置为"option1"、"option2"和"option3"。然后,我们使用v-model指令将selectedOption与每个单选框绑定。当用户选择其中一个选项时,selectedOption的值将自动更新为对应的选项值。 在Vue中,我们还可以使用计算属性来处理input单选框的值。例如,我们可以创建一个计算属性来获取用户选择的选项的文本描述: ```html <template> <div> <input type="radio" id="option1" value="option1" v-model="selectedOption"> <label for="option1">选项1</label> <br> <input type="radio" id="option2" value="option2" v-model="selectedOption"> <label for="option2">选项2</label> <br> <input type="radio" id="option3" value="option3" v-model="selectedOption"> <label for="option3">选项3</label> </div> <div>{{ selectedOptionText }}</div> </template> <script> export default { data() { return { selectedOption: "" }; }, computed: { selectedOptionText() { if (this.selectedOption === "option1") { return "您选择了选项1"; } else if (this.selectedOption === "option2") { return "您选择了选项2"; } else if (this.selectedOption === "option3") { return "您选择了选项3"; } else { return "请选择一个选项"; } } } }; </script> ``` 在上面的例子中,我们创建了一个计算属性selectedOptionText,在这个计算属性中,根据selectedOption的值返回相应的文本描述。然后,我们可以将这个计算属性的值显示在页面上。 希望这个回答能够帮助你理解如何在Vue中使用input单选框。如有疑问,请随时追问。 ### 回答3: 在Vue中使用单选框input type="radio")非常简单。首先,我们需要在Vue组件中使用一个data属性来存储选择的值。我们可以给单选框绑定一个v-model指令,将选择的值绑定到data属性上。 例如,我们可以在Vue组件的data中定义一个selectedOption属性来存储选择的值: ```javascript data() { return { selectedOption: '' }; } ``` 然后,我们可以在模板中使用v-for指令来循环渲染多个单选框,并将每个单选框的值与selectedOption进行绑定。 ```html <div> <label v-for="option in options" :key="option"> <input type="radio" v-model="selectedOption" :value="option"> {{ option }} </label> </div> ``` 在上面的代码中,我们假设已经定义了一个名为options的数组,用于存储选项的值。 当用户选择一个单选框时,selectedOption的值将自动更新为所选选项的值。 我们还可以使用computed属性来处理选择的值。例如,我们可以创建一个computed属性来根据选择的值显示一些内容: ```javascript computed: { displayText() { if (this.selectedOption === 'option1') { return '你选择了选项1'; } else if (this.selectedOption === 'option2') { return '你选择了选项2'; } else { return '请选择一个选项'; } } } ``` 然后,在模板中显示computed属性的值: ```html <div> {{ displayText }} </div> ``` 通过以上步骤,我们可以轻松地在Vue中使用单选框,并根据选择的值执行逻辑或显示内容。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值