Vue学习笔记五

v-model

v-model在双向绑定的时候会忽视value，checked，selected特征的初始值。
v-model可以绑定的控件有textarea,checked,radio,select。其他控件不能够通过v-model双向绑定

对于多个复选框，我们可以通过绑定一个数组的形式实现

<div id="app">
        <input type="checkbox" value="jack" v-model="names" >
        <input type="checkbox" value="xiaoD" v-model="names" >
        <input type="checkbox" value="joe" v-model="names" >
        {{names}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                names:[
                ]
            }
        })
    </script>

多个单选框

<div id="app">
        <input type="radio" value="jack" v-model="name" >
        <input type="radio" value="xiaoD" v-model="name" >
        <input type="radio" value="joe" v-model="name" >
        {{name}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                name: ''
            }
        })
    </script>

下拉框selected

<div id="app">
        <select v-model="name">
            <option disabled value="">请选择</option>
            <option>xiaoD</option>
            <option>joe</option>
        </select>
        {{name}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                name: ''
            }
        })
    </script>

绑定到一个动态属性上

<div id="app">
        <input 
            checked="checked" 
            type="checkbox" 
            v-model="toggle"
            v-bind:true-value="a"
            v-bind:false-value="b"
        >{{toggle}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                toggle:"a",
                a:"aa",
                b:"bb"
            }
        })
    </script>

修饰符

.lazy

默认情况下，我们一直是在同步输入框的值和我们data数据，但是我们可以添加一个.lazy。转换在在change事件中同步

<div id="app">
        <input @change="dos" v-model.lazy="msg" />{{msg}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                msg:"",
            },
            methods: {
                dos: function(){
                    alert(this.msg)
                }
            }
        })
    </script>

.number

将用户输入的值转化为Number类型

<div id="app">
        <input v-model.number="age" type="number">
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                age:0,
            }
        })
    </script>

.trim

<div id="app">
        <input v-model.trim="name">{{name}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                name:'',
            }
        })
    </script>