十日谈 :Vue 中 v-model的使用

欢迎阅读我的Vue学习日记

表单绑定v-model

表单控件在实际开发中非常常见
Vue中使用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 Vue'
    }
  })
</script>

当改变message的值得时候，data里面和text里面的数据都会发生改变，这就叫双向绑定。

v-model的原理

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

v-model是一个语法糖，实际上进行了两个步骤
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件

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

等同于

<input type="text" :value="message" @input="message" = $event.target.value">

v-model结合radio类型使用

<div id="app">
  <lable for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </lable>
  <lable for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </lable>
  <h2>{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        sex:'男'
    }
  })
</script>

v-model结合checkbox

checkbox单选框的实例

<div id="app">
  <lable for="license">
    <input type="checkbox" id="license" v-model="isAgree">同意协议
  </lable>
  <h2>你选择的是{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        isAgree:false
    }
  })
</script>

多选框的演示：
当存在多个选项时，要将多个选项的内容收集起来发给服务器

<div id="app">
  <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 Vue',
        hobbies:[]
    }
  })
</script>

单选框对应布尔值，多选框对应数组变量

v-model结合select

单选：

<div id="app">
  <select name="abc" id="" v-model="fruit">
    <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:{
        message:'Hello Vue',
        fruit:'香蕉'
    }
  })
</script>

多选：
按住ctrl可以进行多选

<div id="app">
  <select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
  </select>
  <h2>你当前选择了{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        fruit:'香蕉',
        fruits:[]
    }
  })
</script>

v-model中修饰符的使用

1.lazy修饰符：

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

默认情况下，v-model默认是在input事件中同步输入框的数据的
也就是说，一单有数据发生改变，对应的data中的数据会自动的发生改变
lazy修饰符可以让数据在拾取焦点或者回车时才更新

2.number修饰符：

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

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
number修饰符可以让在输入框中输入的内容自动转换为数字类型

3.trim修饰符：
如果输入的内容首位有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格