Vue内部指令 v-model

v-model

• v-model指令 绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
• v-model 指令 用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

1.简单的双向数据绑定

html代码：

 <p>{{message}}</p><br>
 请输入：<input type="text" v-model="message">

2.修饰符

html代码：

 <p>{{message}}</p><br>
 请输入：<input type="text" v-model.lazy="message">

• lazy : 取代 input 监听 change 事件
• number ： 输入字符串转为数字
• trim ： 输入去掉首位空格

3文本域加入数据绑定

 <textarea  id="" cols="30" rows="10" v-model="message"></textarea>

4多选按钮绑定一个值

<input type="checkbox"  id='isTrue' v-model='isTrue'> 
<label>{{isTrue}}</label>

5多选绑定一个数组

  <input type="checkbox"  id='N1' value='cc' v-model='names'> 
        <label for="N1">cc</label>
        <input type="checkbox"  id='N2' value='dd' v-model='names'> 
        <label for="N2">cc</label>
        <input type="checkbox"  id='N3' value='ee' v-model='names'> 
        <label for="N3">cc</label>
        <p>{{names}}</p>

6单选按钮绑定数据

<input type="radio"  id="one"value='男' v-model='sex'>
        <label for="one">男</label>
        <input type="radio"  id="tow"value='女' v-model='sex'>
        <label for="one">女</label>
        <p>{{sex}}</p>

js代码

	const app = new Vue({
            el:'#app' , 
            data:{
                message:'' , 
                isTrue:true , 
                names:[] ,
                sex:''
            }
        })