Vue中v-model的使用

1、v-model的基本使用：

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

2、v-model结合redio

<div id="app">
  <label for="nan">男</label>
  <input type="radio"  id="nan" value='男' v-model="sex">
  <label for="nv">女</label>
  <input type="radio" id="nv" value='女' v-model="sex">
  <h2>你选择的性别是{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      sex: '男'
    }
  })
</script>

3、v-model结合checkbox

<div id="app">
  <!--1、单选框的使用-->
<!--  <label for="agree">-->
<!--    <input type="checkbox" id="agree" v-model="agree">同意协议-->
<!--  </label>-->
<!--  <h2>你选择的是{{agree}}</h2>-->
<!--  <button :disabled="!agree">下一步</button>-->
  <!--2、多选框的使用-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="排球" v-model="hobbies">排球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>你的爱好是{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      agree: false,
      hobbies: []
    }
  })
</script>

4、修饰符的作用

<div id="app">
  <!--是去焦点才会绑定-->
<!--  <input type="text" v-model.lazy="message">-->
<!--  <h2>{{message}}</h2>-->
  <!--2、number类型-->
<!--  <input type="number" v-model.number="age">-->
<!--  <h2>{{age}} {{typeof age}}</h2>-->
  <!--去除两边空格-->
  <input type="text" v-model.trim="name">
  <h2>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      age: 21,
      name: ''
    }
  })
</script>