vue单选按钮的v-model绑定问题

Vue的官方文档上说“checkbox 和 radio 使用 checked property 和 change 事件;”,我的第一反应就是radio默认绑定的是checked是否选中,一个布尔类型的值,然后我就绑定了一个响应式数据apple并将其初始值设置为true,我就期待一打开页面就选中,但我打开页面测试发现无论设置为true还是false都无法控制是否选中,后来我发现值为null时居然选中了,我不明白为什么会这样。(不写value属性下我想验证这个v-model默认绑定的checked到底是怎么一回事)

<body>
    <div id="app">
      <input type="radio" v-model="apple">苹果
    </div>
    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        data: {
          apple: true
        }
      }).$mount('#app')
    </script>
  </body>
阅读 2.5k
3 个回答

单选框model值绑定原理:

在单选框中,内部checked值不是直接就是Model绑定的属性,而是该属性与该单选框的value的对比,相等时,checked为true,反之为false;

当值为Null时选中原因:

在vue中,当单选框不绑定value值时,默认是Null,此时model对应属性值也是Null,所以判断成立,checked为true,为选中状态;

在单选中:v-model的初始值是非数组,那么收集的就是checkbox(勾选or未勾选,勾选是true未勾线是false)
v-model的初始值是数组,那么收集的就是value组成的数组

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏