ImQi1云笔记

外观

表单输入绑定

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

<input v-model="message" placeholder="edit me" /> <!--该语法的意思是此input与变量message绑定了，它们的值始终一致-->
<p>Message is: {{ message }}</p>
data() {
    return {
        message:""
    }
}

如下面用一个简单的滑块改变数字显示：

<template>
  <input type="range" v-model="number">
  <p>{{ number }}</p>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    }
  }
}
</script>

修饰符

.lazy

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

<input v-model.lazy="message" />  <!--这种情况下只有每次此input失去焦点后message才会与其同步-->
<p>Message is: {{ message }}</p>
data() {
    return {
        message:""
    }
}

.trim

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

<input v-model.trim="message" />  <!--去除首尾空格-->
data() {
    return {
        message:""
    }
}

许可证：署名 4.0 国际 (CC-BY-4.0)

2026 © 棋