vue的v-model

最新推荐文章于 2024-01-29 18:10:54 发布

Sunlalalla

最新推荐文章于 2024-01-29 18:10:54 发布

阅读量271

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/Sun_of_Rainy/article/details/97014287

前端专栏收录该内容

69 篇文章

订阅专栏

本文探讨了Vue框架中v-model在处理复选框和单选框时遇到的问题，指出v-model默认绑定value而非checked，并且事件监听使用的是onchange而非oninput。通过一个简单的测试案例展示了这个问题，并说明了在实际应用中可能引发的显示同步问题。

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

v-model存在的问题

对于复选框或者单选框的常见组件时，由于v-model默认传的是value，不是checked，触发事件也不是oninput而是onchange

我做了个小测试

html页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_685761_h0xgwcedyyq.css">
    <script src="js/vue.js"></script>
    <script src="js/test.js"></script>
  </head>
  <body>
    <div id="app">
      显示<input type="radio" name="1" value="true" v-model='display'>
      隐藏<input type="radio" name="1" value=""  v-model='display'>
      <div v-if='display'>小窝窝哈哈哈哈</div>
      <div>{{innerText}}</div>
      <div v-html='innerHTML'></div>
    </div>
  </body>
</html>

window.onload = function(){
    var dataList = {
        innerText:'欢迎来到我的小家',
        innerHTML:'欢迎来到<i style=color:red>我的小家</i>',
        name:'Coco',
        display:true
    }
    new Vue({
        el:'#app',
        data:dataList
    })
}

分析：

display的初始化值是true,这里的true可以是任意非空字符串

打开该页面首先是该div块展示