Vue：v-model的使用

1、v-model的基本使用

（1）基本使用

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    }
  })
</script>

v-model可以实现数据的双向绑定，普通的方式是页面从data获取数据，使用v-model能够实现双向绑定，就是在页面发生变化的时候data也会改变

 （2）实现原理

<div id="app">
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

这是手动实现的双向绑定

2、与其它标签的结合使用

（1）与radio的结合使用

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是: {{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      sex: '女'
    }
  })
</script>

与sex绑定后就可以将选择的数据提交到服务器了

（2）与checkbox的结合使用

<div id="app">
  <h2>您的爱好是: {{hobbies}}</h2>
  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      hobbies: [],
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
    }
  })
</script>

（3）与select的结合使用

<div id="app">
  <select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruit: '香蕉',
    }
  })
</script>

3、修饰符

（1）lazy

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

在输入框绑定了data里的message之后是随着输入框里的值而实时改变的，在添加了lazy之后只有在敲击回车之后数据才会同步

（2）number

  <input type="number" v-model.number="age">

页面输入的数据是字符串类型的，我们需要的可能是数字类型的，这个时候就需要用number修饰符进行数据的类型转换

（3）trim

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

取出首尾空格，在输入框中输入数据的时候可能会在首尾添加很多的空格，但是在添加了trim修饰符后，这些空格都会别去除掉