vue 实时监听表单数据

最新推荐文章于 2023-08-13 09:41:35 发布

原创最新推荐文章于 2023-08-13 09:41:35 发布 · 6.1k 阅读

5 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

28 篇文章

订阅专栏

博客介绍了Vue实时监听表单数据的相关内容，给出了实现该功能的代码，并展示了运行效果，如依次输入1、2、3后的打印情况。

vue 实时监听表单数据，代码如下

<template>
    <div>
       <input type="text" v-model="name">
    </div>
</template>

<script>
   export default {
       data (){
           return {
               name: ''
           }
       },
       watch: {
           name(val, oldval){
            console.log(val)     //val 为input中的新值
            console.log(oldval)  //oldval 为input中的旧值 
           }
       }
   }
</script>

运行如下图

依次输入 1、2、3，打印如图