Vue入门--第五天--v-model_v-model="user.vname-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44809439/article/details/109629709

本文介绍了Vue中v-model的使用，包括基本用法在input、textarea、checkbox、radio和select等表单元素的应用，以及如何配合修饰符如.lazy、.number和.trim实现特定功能。v-model作为双向绑定的核心，简化了数据与视图同步的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue表单和v-model

官方文档很健全

基本用法

input
textarea
checkbox
radio
select
form

修饰符

.lazy
.number
.trim

<template>
  <div id="app">
    <input v-model="message" placeholder="edit me"/>
    <p>Message is: {{message}}</p>
    <p><button @click="message = 'frank'">set message to frank</button></p>
  </div>
</template>

<script>
 export default {
   name: "App",
   data(){
     return {
       message: 'hi'
     }
   },
   components: {}
 };
</script>

改了message，UI会自动变化（改了内存，UI更新）
改了input里的东西，message变化，（UI改变，内存变化）

这就是最简单的双向绑定

修饰符

.lazy 待会儿变
.number 只要数字
.trim 两头的空格我不要

v-model

v-model="user.username"等价于

:value="user.username"
@input="user.username = $event.target.value"

自己写一个v-model

<template>
  <div>
    <input :value="value" @input="outInput" />
  </div>
</template>

<script>
  export default {
    name: "MyInput",
    props: {
      value: {
        type: String
      }
    },
    methods: {
      onInput(e) {
        const value = e.target.value;
        this.$emit("input", value);
      }
    }
  };
</script>