vue2 系列:自定义 v-model

简介: vue2 系列:自定义 v-model

1. input 中的 v-model

<!-- 表单双向绑定 -->
<input :value="username" @input="username = $event.target.value" />
<!-- 等于 -->
<input v-model="username" />

2. 自定义组件 v-model

<!-- 组件双向绑定 -->
<!-- 子 -->
<script>
export default {
  props: {
    value: {
      required: true,
    },
  },
  watch: {
    value(newValue) {
      this.my_input = newValue;
    },
  },
  data() {
    return {
      my_input: this.value,
    };
  },
  methods: {
    handleChange() {
      this.$emit("input", this.my_input);
    },
  },
};
</script>
<template>
  <el-input v-model="my_input" @change="handleChange"></el-input>
</template>
 
<!-- 父 -->
<my-component v-model="username" />


目录
相关文章
|
30天前
|
JavaScript
Vue3的v-model说明和使用方法
Vue3的v-model说明和使用方法
53 1
|
30天前
|
JavaScript
vue v-model(二)
vue v-model(二)
|
30天前
|
JavaScript 编译器 数据安全/隐私保护
Vue3的v-model
Vue3的v-model
41 0
|
30天前
|
JavaScript 前端开发 API
Vue中v-model的原理
Vue中v-model的原理
|
8月前
|
JavaScript 前端开发
vue3 v-model的使用
vue3 v-model的使用
74 0
|
30天前
|
JavaScript 开发者
Vue中v-model的原理是什么?
Vue中v-model的原理是什么?
24 0
|
10月前
|
JavaScript
Vue中v-model的使用
Vue中v-model的使用
48 0
|
30天前
|
JavaScript
Vue的基本组件3.1(v-model)
Vue的基本组件3.1(v-model)
23 0
Vue的基本组件3.1(v-model)
|
10月前
|
JavaScript
[Vue]v-model收集表单数据
[Vue]v-model收集表单数据
|
JavaScript
Vue:自定义v-model数据双向绑定
Vue:自定义v-model数据双向绑定
88 0
Vue:自定义v-model数据双向绑定