input输入框输入，数据会同步显示

原创

已于 2022-04-27 17:05:07 修改 · 2.9k 阅读

标签

#javascript

收录于

于 2022-04-10 17:46:26 首次发布

本文介绍了使用JavaScript实现输入框输入数据实时同步显示的两种方案，包括基于keyup事件监听和Vue的单向数据绑定。在keyup事件方案中，每当输入字符时，函数会获取并打印输入值。而在Vue方案中，数据变化直接驱动视图更新。

2种方案来实现

第一种方案：

第二种方案

Bug

第一种方案：

let task =   document.getElementById('filterInput');
      task.addEventListener('keyup',function(e){
           let inputValue  =   e.target.value;
           console.log(inputValue);
      })

每按下就会执行keyup事件,随之执行函数:函数会获取刚才输入的值,并打印出来.

第二种方案

<div id="root">

//单向数据绑定
<input type="text" v-bind:value ="name" >

</div>


Vue.config.productionTip = false;   //阻止 vue启动产生的生产提示

        new Vue({
            el:'#root',
            data:{
                name:"孙大伟"
            }
        })

用vue的单向数据绑定来写的,data对象里面的数据发生改变,页面中的