跟着技术胖学Vue2.0—第六课：v-model指令

学习回顾

课程主要内容

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>

结果：

      

总结

主要总结一下作为一个前端小菜鸡在完成上述代码的过程中自己的一些小错误。

1、textarea是一个单独的标签，不是input标签里的一个type。

2、radio和chekbox里的value是显示在选项框后面的文字，而显示的文字用lable标签配合for属性来显示。

---

今天的学习任务顺利完成！还是有些难度的，特别是对于单选框和多选框的绑定，代码很简单，但是这个效果太神奇了 ，真的厉害！