Vue知识点总结(5)——v-model（超级详细）

今天的内容是v-model

双向数据绑定是Vue的灵魂特点之一，v-model是完美的体现了Vue双向绑定的特点。

你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected，attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

文本

html">   <div id="app">
   <p>{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message" /></p>
    </div>
     <script>javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello'
            }
        });
    </script>

在这里插入图片描述
你在输入框中输入的东西会很快的渲染到上方的p标签中，这样就完整了一个最基本的数据的双向绑定，非常的简单也非常的实用。

多行文本

html">   <div id="app">
       <h3>文本域</h3>
       <textarea cols="30" rows="10" v-model="message"></textarea>
    </div>
     <script>javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello'
            }
        });
    </script>

在这里插入图片描述
效果和单行文本相同，输入的内容会被立即绑定到message上，并渲染到页面上

复选框

html">   <div id="app">
       <h3>多选框绑定数组</h3>
        <p>
            <input type="checkbox" id="Ray" value="Ray" v-model="names">
            <label>Ray</label>
            <input type="checkbox" id="Creator" value="Creator" v-model="names">
            <label>Creator</label>
            <input type="checkbox" id="Code" value="Code" v-model="names">
            <label>Code</label>
        </p>
        <p>{{names}}</p>
    </div>
     <script>javascript">
        var app = new Vue({
            el:'#app',
            data:{
                names:[],
            }
        });
    </script>

在这里插入图片描述
当我们对选项进行选择时，所选的内容会被立即绑定到names中，并以很快的速度渲染到页面上。

单选框

html">   <div id="app">
        <h3>单选框绑定</h3>
        <p>
            <input type="radio" id="m" value="男" v-model="sex">
            <label>男</label>
            <input type="radio" id="w" value="女" v-model="sex">
            <label>女</label>
        </p>
        <p>{{sex}}</p>
    </div>
     <script>javascript">
        var app = new Vue({
            el:'#app',
            data:{
               sex:''
            }
        });
    </script>

在这里插入图片描述

效果和复选框基本类似，选择选项后，所选内容被绑定到sex，然后渲染在页面上。

除此之外，v-model还有一些修饰符

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

html">   <div id="app">
        <p>{{message}}</p>
        v-model的修饰符:
        <p>v-model.lazy(懒加载):<input type="text" v-model.lazy="message" /></p>
        <p>v-model.number(只绑定数字):<input type="text" v-model.number="message" /></p>
        <p>v-model.trim(去空格至1个):<input type="text" v-model.trim="message" /></p>
    </div>
     <script>javascript">
        var app = new Vue({
            el:'#app',
            data:{
               message:'Hello'
            }
        });
    </script>