学习回顾

课程主要内容

1、掌握v-model文本框绑定及3个修饰符

2、掌握v-model文本域绑定

3、掌握v-model多选框绑定一个值和数组

4、掌握v-model单选框绑定

操作步骤

1、掌握v-model文本框绑定及3个修饰符

首先，在index.html中新建一个li，并在example里新建一个v-model.html用来存储我们的实例。

下面要开始实现v-model.html中的内容了。我们要实现的是，在前端页面中的文本框里的内容和p标签内显示的内容同步，如下：

上述代码很简单，只需要在input标签里使用v-model绑定上我们的数据就行啦。不过一定要记得绑定的数据要写在data里面：

<p>输入的内容为：{{message}}</p>
        <input type="text" v-model='message'>

接下来介绍三个修饰符。

第一个是v-model.lazy。用了这个修饰符后，我们在文本框内写内容时，p标签里不会立刻显示我们输入的内容，而是会在我们的鼠标从文本框中移出去后才更显p标签里的内容，如下：

第二个是v-model.number。这个修饰符表示文本框内只能输入数字，如果不是数字，会不显示在p标签内，当鼠标离开文本框，文本框内非数字内容也会被清空。但是要注意，如果在文本框中一开始就输入的是字符串，那么该修饰符就不会生效。

第三个是v-model.trim。这个修饰符表示会自动处理掉文本框内输入的空格，使其不生效。

把上述的代码写在一起，如下：

<div id = 'app'>
        <h3>绑定文本框</h3>
        <p>输入的内容为：{{message}}luolan</p>
        <p>v-model：<input type="text" v-model='message'></p>
        <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：<input type="text" v-model.trim='message'></p>      
    </div>

显示效果如下：

2、掌握v-model文本域绑定

<h3>绑定文本域</h3>
        <textarea rows='10' cols='20' v-model='message'></textarea>

3、掌握v-model多选框绑定一个值和数组

①v-model多选框绑定一个值

实现的功能是：选中多选框，后面的文字显示true，取消选中，后面的文字显示false。

代码：

<h3>多选框绑定一个值</h3>  
        <input type="checkbox" id="isTrue" v-model='isTrue'>
        <label for="isTrue">{{isTrue}}</label>

结果：

②v-model多选框绑定数组

实现的功能是：选择多个多选框，将多选框中的value显示在下方的[]内；如果取消选择，则[]内也取消显示对应的内容。

代码：

<h3>多选框绑定数组</h3>  
        <input type="checkbox" id="xioaming" value='小明' v-model='names'>
        <label for="xioaming">小明</label>
        <input type="checkbox" id="xiaohong" value='小红' v-model='names'>
        <label for="xioaming">小红</label>
        <input type="checkbox" id="xiaolan" value='小兰' v-model='names'>
        <label for="xioaming">小兰</label>
        <input type="checkbox" id="huahua" value='花花' v-model='names'>
        <label for="xioaming">花花</label>
        <p>{{names}}</p>

names:[]//data中的数据

结果：

4、掌握v-model单选框绑定

实现功能：两个单选框分别为男和女，当选中男，则在下方p标签内显示选中的性别为男；如果选中女，则在下方p标签内显示选中的性别为女。

代码：

 <h3>单选框绑定</h3> 
        <input type="radio" id='one' value="男" v-model='sex'>
        <label for="one">男</label>
        <input type="radio" id='two' value="女" v-model='sex'>
        <label for="two">女</label>
        <p>你选择的性别为：{{sex}}</p>

结果：