vue基础指令：v-model

v-model绑定不同表单标签

目标：value属性和Vue数据变量, 双向绑定到一起

语法: v-model="Vue数据变量"

<template>
  <div>
    <div>
      <span>来自于：</span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京">北京</option>
        <option value="南京">南京</option>
        <option value="天津">天津</option>
      </select>
    </div>
    <div>
        <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性（只要选中一个复选框，就会把checked的值true给此变量）
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好：</span>
      <input type="checkbox" value="吃饭" v-model="hobby" />吃饭
      <input type="checkbox" value="睡觉" v-model="hobby" />睡觉
      <input type="checkbox" value="打游戏" v-model="hobby" />打游戏
    </div>
    <div>
      <span>性别：</span>
      <input type="radio" name="sex" value="男" v-model="sex" />男
      <input type="radio" name="sex" value="女" v-model="sex" />女
    </div>
    <div>
      <span>自我介绍：</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      from: "",
      hobby: [],
      sex: "男",
      intro: "",
    };
  },
};
</script>
<style  scoped>
</style>

---

 v-model修饰符

语法 : v-model.修饰符="vue数据变量"

• .number 以parseFloat转成数字类型   感觉没啥用，不如直接表单直接改number

• .trim 去除首尾空白字符

• .lazy 在change时触发而非input时    失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量

<template>
  <div>
    <div>
      <!-- .number修饰符-把值parseFloat转数值再赋予给v-model对应的变量 -->
      <!-- 标签中，所有属性的值的类型是字符串 ，所以用户输入的23，是一个字符串的"23"-->
      <span>请输入年龄：</span>
      <!-- 感觉没啥用，不如直接表单直接改number -->
      <input type="text" v-model.number="age" />
      <input type="number" v-model.number="age" />
    </div>
    <div>
      <!-- .trim修饰 - 去除首尾两边空格 -->
      <span>个人签名：</span>
      <input type="text" v-model.trim="autograph" />
    </div>
    <div>
      <!-- .lazy修饰符 - 失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量 -->
      <!--  change： 监听文本框的内容改变，但是需要失去焦点才会触发
            input：监听文本框的内容改变-->
      <span>个人简介：</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 0,
      autograph:'',
      intro:''
    };
  },
};
</script>
<style  scoped>
</style>