Vue2.0学习笔记v-model(6)

v-model:绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
一、最简单的双向数据绑定

<div id="app">
    <h1>原始信息：{{msg}}</h1>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"hello",
        }
    })
</script>

二、修饰符
.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
如果一开始输入的是字符，不是数字，并不会起作用
.trim：输入去掉首尾空格。

  <p>v-model:lazy<input type="text" v-model.lazy="msg"></p>
    <p>v-model:number<input type="text" v-model.number="msg"></p>
    <p>v-model:trim<input type="text" v-model.trim="msg"></p>

三、文本域加入数据绑定

 <h1>文本域：</h1>
    <textarea cols="10" rows="10" v-model="msg"></textarea>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"hello",
            isTrue:true,
            names:[],
            sex:'男'
        }
    })
</script>

四、多选按钮绑定一个值

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

五、多选绑定一个数组

 <p>
        <input type="checkbox" id="jian" v-model="names" value="jian">
        <label for="jian">jianjian</label>
        <input type="checkbox" id="lili" v-model="names" value="lili">
        <label for="lili">lili</label>
        <p>{{names}}</p>
    </p>

六、单选按钮绑定

 <h1>单选框绑定</h1>
    <p>
        <input type="radio" id="male" value="男" v-model="sex">
        <label for="male">男</label>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female">女</label>
        <p>选的是:{{sex}}</p>
    </p>
 <script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"hello",
            isTrue:true,
            names:[],
            sex:'男'
        }
    })
</script>

加油啊！今天吃狗粮，明天除夕了，希望在新年来前把这个学完了，心好累，某些人，爱咋咋地，不奉陪了，不想当炮灰和接盘侠，就酱！