vue学习笔记v-model(45-50)

vue学习笔记v-model(45-50)

vue中的v-model实现了数据的双向绑定

v-model的原理（双向绑定）：

v-model实际上是一个语法糖，他背后包含了两个操作：
1、v-bind给输入框绑定一个value属性：渲染时值为value
2、v-on指令给当前输入框绑定一个事件：输入时改动value属性
所以说：相当于

v-model使用举例：

radio类型：
例子：

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

如何保持多个单选框之间是互斥的：
    可以加上相同的name属性，不过在加上相同的v-model属性之后，就可以不加name属性也能达到互斥的效果。

如何加上预设的值：
    直接在data里面设置成预设的值即可，由于双向绑定，就自动选中了预设的值。

checkbox类型：
checkbox控件可组成两种类型：单选框和多选框
单选框：
v-model一般与一个布尔值进行绑定，一般选中value就置为true，没有选中就置为false
例子：是否同意某项协议

<!-- 单选框 -->
<label for="license">
  <input type="checkbox" id="license" v-model="isAgree">同意协议
</label>
<button :disabled="!isAgree">下一步></button>

多选框：
v-model一般与一个数组绑定在一起，选中后就直接将value添加到数组当中，取消选中后就从数组中移除。
例子：选择自己的兴趣爱好

<!-- 多选框 -->
<input type="checkbox" v-model="hobbies" value="LOL">LOL
<input type="checkbox" v-model="hobbies" value="Dota2">Dota2
<input type="checkbox" v-model="hobbies" value="HearthStone">HearthStone
<input type="checkbox" v-model="hobbies" value="StarCraft2">StarCraft2
<h2>您的爱好是：{{hobbies}}</h2>

select类型：
和checkbox类型相同，也分为单选和多选（多选时在select里面加上multiple，就可以按住ctrl键进行多选）：
单选时，绑定单个元素；多选时和checkbox一样，绑定一个数组。
单选例子：

<select name="abc" v-model="fruit">
  <option value="苹果">苹果</option>
  <option value="香蕉">香蕉</option>
  <option value="鸭梨">鸭梨</option>
  <option value="榴莲">榴莲</option>
  <option value="葡萄">葡萄</option>
</select>
<h2>选择的水果是：{{fruit}}</h2>

多选例子：

<select name="abc" v-model="fruits" multiple>
  <option value="苹果">苹果</option>
  <option value="香蕉">香蕉</option>
  <option value="鸭梨">鸭梨</option>
  <option value="榴莲">榴莲</option>
  <option value="葡萄">葡萄</option>
</select>
<h2>选择的水果是：{{fruits}}</h2>

值绑定：
作用：防止在给标签设置value时，直接把value值写死。值绑定大多是通过服务器传来的列表进行构建多个可选择的value
例子：

<div id="div1">
  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
  </label>
  <h2>你选择的是：{{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#div1',
    data: {
      message: 'HelloVueJs',
      hobbies: [],
      originHobbies: ['篮球', '足球', '篮球2', '足球2', '篮球3', '足球3']
    }
  })
</script>

v-model常用修饰符的使用：
1、.lazy
作用：在用户敲击回车或者失去焦点时进行更新
用法举例：

<div id="div1">
  <input type="text" v-model.lazy="message">
  <h2>message的内容是：{{message}}</h2>
</div>

2、.number
作用：将输入框中的内容自动转换为数字
3、.trim
作用：将输入内容首尾的空格进行去除