Vue05_v-model进一步学习（双向数据绑定在checkbox中的运用）

最新推荐文章于 2024-04-16 20:18:08 发布

ParadoxLin

最新推荐文章于 2024-04-16 20:18:08 发布

阅读量851

点赞数 1

分类专栏： Vue 文章标签： vue checkbox

原文链接：https://blog.csdn.net/mutouren121/article/details/80608587

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1. v-model在input中的实例

在这里插入图片描述
当使用如上代码时，样式如下：

输入框内并没有显示“请输入地名地址”字样，其原因是：

v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：

在这里插入图片描述

v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。因此默认的value不会显示，仅会在初始化渲染时短暂显示。

当我们要实现这个效果时，需要用到 placeholder :
placeholder 这个属性是HTML5中新增的属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入字段后消失，有些浏览器则是获得焦点后该提示便消失（如Safari、IE）。

在这里插入图片描述

PS：优先级 v-model > value > placeholder，当v-model与value都为空字符串时，placeholder才生效

见代码：

<body>
    <div id="app">
        <input type="text" v-model="msg" placeholder="请输入">
        {{ msg }}
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "",//双向数据绑定，空字符串使得placeholder生效
            }
        })
    </script>
</body>

效果：
null

上段内容原文见《input中v-model和value不能同时调用时解决方案》
下段内容原文见《vue中关于checkbox数据绑定v-model指令的个人理解》

2. v-model对应的数据为input的value属性，在checkbox中则不同

（1）checkbox案例1：

<body>
    <div id="app">
        <input type="checkbox" v-model="msg">
        {{ msg }}
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: '',
            }
        })
    </script>
</body>

在这里插入图片描述

勾选为true，取消勾选为false
且data中msg如果初始化为true，则checkbox默认选中

到这里让人会有在checkbox里，v-model对应的值为true或false，似乎和checked属性有关

（2）chexkbox案例2：

<body>
    <div id="app">
        <input type= "checkbox" v-model= "msg" value= "angular" >angular <br/>
        <input type= "checkbox" v-model= "msg" value= "react" >react <br/>
        <input type= "checkbox" v-model= "msg" value= "vue" >vue <br/>
        {{ msg }}
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: '',
            }
        })
    </script>
</body>

可以看到有了value属性，v-model 对应的msg 依然是true或false

那么之前的猜想难道是正确的吗？我们来改一点代码，通常v-model对应的都是字符串，这次我们初始化为空数组[ ]

（3）checkbox案例3 ：

var app = new Vue({
    el: "#app",
    data: {
        msg:[]//将msg:''改为[]
    }
})

可以看到，选中谁，谁的value就会添加到数组里，
且数据是双向绑定的，所以，当我们初始化数据的数组里赋予上面的value值时，所对应的checkbox便会默认选中

3. 总结

“ 我 ”在网上找了很久，没有发现一个特别清楚的解释，所以在这里发表一下自己的理解：

1.checkbox和普通input一样，点击勾选其实就是输入value,而输入value会改变checked属性,所以会选中
当v-model 对应“字符串”时会解析“字符串”为布尔值， v-model对应有值或是true，checkbox都会选中。
2.当v-model对应“数组”时有勾表示已选中，相当于赋值给，相当于有value，v-model对应value,
- 没有value属性时，点勾相当于将(“null”)赋值给value——>v-model( “null” 为字符串),
- 有value属性时，点勾相当于将(value)赋值给value——>v-model，
- 注意数据是双向绑定的，所以数组里的值对应着checkbox的value——>v-model。
3.处理表单，v-model一般都是对应字符串，所以处理checkbox的v-model，善用对应布尔值控制勾选。

ParadoxLin

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue05_v-model进一步学习（双向数据绑定在checkbox中的运用）

1.优先级 v-model > value > placeholder，当v-model与value都为空字符串时，placeholder才生效；2.v-model对应的数据为input的value属性，在checkbox中则不同
复制链接

扫一扫