vue.js06

一、v-model

（一）作用

Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。

<div id="app">
  <input v-model="message" type="test">
{{ message }}
</div>
 
<script>
const app =new Vue({
  el: '#app',
  data: {
    message: 'Hello',
  }
})
</script>

（二）原理

    v-model本质上是个语法糖，其实现原理包含两个步骤

1. 通过v-bind绑定一个value属性
2. 通过v-on指令给当前元素绑定input事件

     v-model使用于input与textarea :

<div id="app">
    <input v-model="message" type="text">{{ message }}
    <input :value="message" type="text" v-on:input="valueChange">
//v-on:input="" 用于动态监听用户输入的信息，在界面上产生一个事件后，浏览器会生成一个event对象，这个event对象就包含了输入的信息
    <input type="text" :value="message" v-on:input="message=$event.target.value">
    <textarea v-model="message"></textarea>

    <h2>{{ message }}</h2>
</div>
 
<script>
const app =new Vue({
  el: '#app',
  data: {
    message: 'Hello',
  }
methods:{
    valueChange(event){
        this.message=event.target.value;
    }
}
})
</script>

（三）v-model的使用

     1.结合radio

<div id="app">
    <!--当v-model绑定的是同一个变量，可以不加name属性来实现radio的互斥-->
    <label for="right">
        <input type="radio" id="right" name="judge" value="对" v-model="judge">对
    </label>
    <label for="wrong">
        <input type="radio" id="wrong" name="judge" value="错" v-model="judge">错
    </label>
    <h2>你的判断是：{{judge}}</h2>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            judge:'对'  //目的：选择之后将值绑定到judge中
        }
    })
</script>

  2. 结合checkbox

  单个复选框：

<div id="app">
    <label for="ok">
        <input type="checkbox" id="ok" v-model="isOk">可以
    </label>
    <h4>{{isOk}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            isOk:false
        }
    })
</script>

 多个复选框：

<div id="app">
    <select name="" id="" v-model="type">
        <option value="电影">电影</option>
        <option value="动漫">动漫</option>
        <option value="电视剧">电视剧</option>
    </select>
    <h4>喜欢的视频类型是：{{type}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            type:'动漫'
        }
    })
</script>

3.结合select 

<div id="app">
    <select name="" id="" v-model="type">
        <option value="电影">电影</option>
        <option value="动漫">动漫</option>
        <option value="电视剧">电视剧</option>
    </select>
    <h4>喜欢的视频类型是：{{type}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            type:'动漫'
        }
    })
</script>

（四）v-model修饰符

1. lazy

v-model在默认情况下同步了输入框的数据，就是说输入框数据一有改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新

<input type="text" v-model.lazy="message">

2.number

默认情况下，输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。

<input type="text" v-model.number="message">

3.trim

trim修饰符可以去掉从输入框获取的内容的左右两边的空格

<input type="text" v-model.trim="messa">