v-model双向绑定与v-model修饰符

v-model的作用

把value属性和vue数据变量双向绑定到一起.

语法

v-model="data数据变量"

• 双向数据绑定
  • 数据变化->视图自动同步
  • 视图变化->数据自动同步 演示:请输入选择和绑定.

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <!-- 绑定输入 -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    
    <!-- 绑定选择 -->
    <div>
      <span>来自于哪里?</span>
      <select v-model="from">
        <option value="西安">陕西-西安</option>
        <option value="燕京">北京-燕京</option>
        <option value="大连">辽宁-大连</option>
      </select>
    </div>
    
    <div>
      <!-- checkbox特殊, 内部判断v-model是数组, 绑定value值 -->  
      <span>爱好</span>
      <input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>
      <input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
      <input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: "",
      hobby: [], 
    }
  }
};
</script>

v-model适用于表单开发，自动获取用户输入或选择数据

v-model修饰符作用

让v-model拥有更强大的功能

语法

• v-model.修饰符="vue数据变量"
  • .number   以parseFloat转成数字类型
  • .trim          去除首尾空白字符
  • .lazy           在失去焦点时触发更改而非inupt时

示例:

<template>
  <div>
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

v-model修饰符, 可以对值进行预处理, 非常高效好用更多的修饰符请查阅文档.