vue3框架_表单输入绑定

vue3框架_表单输入绑定

一.使用介绍

你可以用 v-model 指令在表单 <input>、 <textarea>及 <select> 元素上创 建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元 素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用 户的输入事件来更新数据，并在某种极端场景下进行一些特殊处 理。

修饰符：

• .lazy

  在默认情况下， v-model 在每次 input 事件触发后将输入框的值与数据 进行同步 。你可以添加 lazy 修饰符，从而转为在 change 事件之后进 行同步，即失焦的时候，进行数据同步。

• .trim

  如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。

二.实例

<template>
  <div class="hello">
    <input type="text" v-model.lazy="username">
    <br>
    <input type="text" v-model.trim="pwd">
    <p>用户名:{{ username }}</p>
    <br>
    <p>密码:{{ pwd }}</p>
    <br>
    <button @click="getName_pwd">点击获取用户名和密码</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      username:'',
      pwd:''
    }
  },
  methods:{
    getName_pwd() {
      alert(this.username);
      alert(this.pwd)
    }
  }
}
</script>