【vue】v-model相关知识点

最新推荐文章于 2022-04-21 11:00:05 发布

-4444x-

最新推荐文章于 2022-04-21 11:00:05 发布

阅读量159

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43490212/article/details/114180762

版权

vue.js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

数据响应式

html中的响应式（屏幕尺寸的变化，导致样式的变化）
数据响应式（数据的变化导致页面内容发生变化）
数据的更新——>界面的更新

双向数据绑定

v-model

v-model是一个指令，限制在 <input>、<select>、<textarea>、components 中使用
表单控件在实际开发中是非常常见的。
特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。

当输入框中的内容改变时，页面上的msg会自动更新

【后续补充】

1.v-model在input的下拉框

1.1 存在多个单选按钮

1.2 复选框中的应用

<body>
    <div id="app">
        <!-- 1.checkbox单选框-->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>您选择的是:{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>
        <br>
        <!-- 2.checkbox多选框 -->
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="兵乓球" v-model="hobbies">乒乓球
        <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
        <h2>您的爱好是:{{hobbies}}</h2>


    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                isAgree: false,
                hobbies: []
            }
        })
    </script>

</body>

1.3 v-model : select

和checkbox一样，select也分单选和多选两种情况。
单选:只能选中一个值。
v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选:可以选中多个值。
v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

2.v-model修饰符

lazy修饰符:
默认情况下，v-model默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新:
number修饰符:
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型:
trim修饰符:
如果输入的内容首尾有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格

3.v-model的底层实现原理

-4444x-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【vue】v-model相关知识点

文章目录数据响应式双向数据绑定v-model1.v-model在input的下拉框1.1 存在多个单选按钮1.2 复选框中的应用1.3 v-model : select2.v-model修饰符3.v-model的底层实现原理数据响应式html中的响应式（屏幕尺寸的变化，导致样式的变化）数据响应式（数据的变化导致页面内容发生变化）数据的更新——>界面的更新双向数据绑定v-modelv-model是一个指令，限制在 <input>、<select>、<te
复制链接

扫一扫

专栏目录