Vue学习笔记五

r囧r小猫 2022-06-09 11:23 148阅读 0赞

### 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>

#### 多个单选框 ####

#### 下拉框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类型

#### .trim ####