【vue核心技术实战精讲】1.9 Vue指令之v-model双向数据绑定

本文链接：https://blog.youkuaiyun.com/ladymorgana/article/details/137128062

文章目录

前言
本节内容

前言

上节,我们学习了

Vue指令之v-on事件处理、事件修饰符、v-for列表渲染点击进入上一节

本节内容

Vue指令之v-model双向数据绑定

1、`v-model`

预期：随表单控件类型不同而不同
限制：
- <input>
- <select>
- <textarea>
- components
修饰符：
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
用法：

在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。
参考：
- 表单控件绑定
- 组件 - 在输入组件上使用自定义事件

2、`总结`

v-model 双向的数据绑定

双向数据流（绑定）

页⾯面改变影响内存(js)
内存(js)改变影响⻚页⾯面

v-bind 和 v-model 的区别?

input v-model=“name”
- 双向数据绑定⻚页⾯面对于input的value改变，能影响内存中name变量量
- 内存js改变name的值，会影响⻚页⾯面重新渲染最新值
input :value=“name”
- 单向数据绑定内存改变影响⻚页⾯面改变
v-model: 其的改变影响其他 v-bind: 其的改变不不影响其他
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

3-1、`实战` `<input>`

A、 `输入框 type="text"`

示例

<body>
    <div id='app'>
        <p>{
   
   {
   
   msg}}</p>
        <input type="text" v-model='msg'>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
   
   
            el: '#app',
            data: {
   
   
                msg: 'input',
            }
        })
    </script>
</body>

效果

B、 `单选按钮 type="radio"`

示例

    <div id='app'>
        <!-- for="one" 表示绑定id='one'标签-->
        <div id="example-4">
            <label>单选按钮</label>
            <br>
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id