v-model

77 阅读1分钟

v-model的基本使用
v-model的基本使用方法是在模板中使用v-model指令并将其绑定到一个Vue实例的数据属性上。

     <template>
      <div>
        <input v-model="message" placeholder="请输入内容">
        <p>您输入的内容是: {{ message }}</p >
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          message: ''
        }
      }
    }
    </script>

v-model修饰符
除了基本的用法,v-model 还支持一些修饰符,可以对值进行处理或对事件进行控制机制。下面是几个常用的 v-model 修饰符

.number:用于将用户输入的字符串转换成数字类型,以便进行数学计算。
例如:
.trim:用于去掉用户输入文本的首位空格
.lazy:指定只有在失去焦点或按下回车键时才更新绑定的属性值,而不是在每次输入时都去更新。