美文网首页
vue中v-model和@input绑定事件

vue中v-model和@input绑定事件

作者: 这里王工头 | 来源:发表于2019-05-01 15:43 被阅读0次

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

@TOC

1 前言

v-model双向数据绑定,@input输入触发事件,不多赘述,今天在书上看到一个,假如输的是汉字,用v-model去绑定数据的时候,当还没有敲下汉字的时候,假如还是在拼音阶段的时候就不会实时更新,所以使用@input去绑定事件,来实现实时显示汉字

2 代码

<template>
    <div>
        <input type="text" @input="handleInput">
        <p>{{ value }}</p>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                value:''
            }
        },
        methods:{
            // 如果想总实时更新的话 可以使用@input
            handleInput: function (e) {
                this.value = e.target.value
            }
        }
    }
</script>

相关文章

  • 表单和v-model

    v-model VUE提供了v­-model指令, 用于在表单类元素上双向绑定事件 input和textarea ...

  • React中双向数据绑定基本原理

    在Vue.js中在@input等事件和v-bind上扩展了v-model实现双向数据绑定,在React中也是一样的原理

  • vue中v-model和@input绑定事件

    欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ @TOC 1...

  • 2018-09-14 vue.js

    vue.js v-model v-on: 1. v-model='' 双向数据绑定 在给

  • 6. 表单与v-­model

    6.1 基本用法 v-model: VUE提供了v­-model指令, 用于在表单类元素上双向绑定事件 input...

  • v-model和表单

    6.1 基本用法 v­-model: VUE提供了v-model指令, 用于在表单类元素上双向绑定事件 input...

  • (33)Vue购物车

    用v-model来双向绑定input控制checkbox是否选中 Vue中双向数据绑定是如何实现的 positio...

  • .sync和v-model的区别

    v-model: 父组件上绑定v-model,相当于是子组件上 绑定 :value + @input事件(可以是其...

  • Vue3 v-model 语法糖

    v-model的本质是属性绑定和事件绑定的结合,可以在标签上使用也可以在组件上使用 Vue2中v-model vu...

  • Vue 实例 一

    Vue实例基础一 数据的双向绑定 v-model 绑定表单的相应事件,和数据实现动态的双向绑定,需要在Vue实例中...

网友评论

      本文标题:vue中v-model和@input绑定事件

      本文链接:https://www.haomeiwen.com/subject/doqwnqtx.html