vue学习笔记7——v-model

** 双向数据绑定的几个修饰符**

• v-model.lazy 当焦点离开输入框时才进行渲染
• v-mmodel.number 输入框里边必须是数字，否则会清空。当先输入字符串后输入数字，就无法将字符串省略掉
• v-model.trim 清空空格

<p>原始数据：{{message}}</p>
<h3>文本框</h3>    
<input type="text" v-model="message"><br>
<input type="text" v-model.lazy="message"><br>
<input type="text" v-model.number="message"><br>
<input type="text" v-model.trim="message"><br>
<hr>
<h3>文本域</h3>
<textarea v-model="message"></textarea>
<hr>
<h3>多选框</h3>
<input type="checkbox" id="checkbox" v-model="isTrue">
<label for="checkbox">{{isTrue}}</label>
<hr>
<h3>多选框绑定一个数组</h3>
<p>
    <input type="checkbox" id="zhang" value="zhangsan" v-model="names">
    <label for="zhang">zhangsan</label>
    <input type="checkbox" id="li" value="lisi" v-model="names">
    <label for="zhang">lisi</label>
    <input type="checkbox" id="wang" value="wangwu" v-model="names">
    <label for="zhang">wangwu</label>
</p>
<p>{{names}}</p>
<hr>
<h3>单选按钮的双向数据绑定</h3>
<p>
    <input type="radio" id="man" value="男" v-model="sex">
    <label for="man">男</label>
    <input type="radio" id="woman" value="女" v-model="sex">
    <label for="woman">女</label>
    <p>你选择的性别是：{{sex}}</p>
</p>

var a = new Vue({
    el : "#app",
    data : {
        message : "hello world",
        isTrue : false,
        names : [],
        sex : "男"
    }
})

单选下拉菜单

<div id="app6">
    <select v-model="selected">
        <option disabled>please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>selected : {{ selected }}</span>  
</div>

    var app6 = new Vue({
        el : "#app6",
        data : {
            selected : ' '
        }
    });

多选下拉菜单

<div id="app7">
    <select v-model="selected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>selected : {{ selected }}</span>
</div>

selected : []

绑定下拉菜单，且名称与之对应

<div id="app8">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{option.text}}
        </option>
    </select>
    <span> selected ： {{ selected}}</span>
</div>

var app8 = new Vue({
    el : '#app8',
    data : {
        selected : 'A',
        options : [
            {text : 'one', value : 'A'},
            {text : 'two', value : 'B'},
            {text : 'three', value : 'C'}
        ]
    }
})