一、用watch方法监听这个变量。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>hello vue</title>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div id="watch-example">

    <p>

        Ask a yes/no question:

        <input v-model="question">

      </p>

      <p>{{ answer }}</p>

</div>

<script>

    var watchExampleVM = new Vue({

        el: '#watch-example',

        data: {

            question: '',

            answer: 'I cannot give you an answer until you ask a question!'

        },

        watch: {

            // 如果 `question` 发生改变，这个函数就会运行

            question: function () {

                this.answer = 'Waiting for you to stop typing...'

                alert(this.question)

            }

        }

    })

</script>

</body>

</html>

二、用watch监听对象属性。

<!DOCTYPE html>

<html lang="en">  

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

    </head>  

    <body>

        <div id="example">

            <input type="text" v-model="items.type" ref="type" />

            <input type="text" v-model="items.content" ref="content">

            <div class="show">输入框1的内容：{{items.type}}</div>

            <div class="show">输入框2的内容：{{items.content}}</div>

        </div>

        <script>

            var example1 = new Vue({

                el: '#example',

                data: {

                    items: {

                        type: '千年之恋:',

                        content: '是谁在悬崖上泡一壶茶'

                    }

                },

                watch: {

                    items: {

                        handler: function() {

                            alert(this.$refs.type.value + this.$refs.content.value);

                        },

                        deep: true

                    }

                }

            })

        </script>

    </body>  

</html>

三、原生js实现。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>输入监测</title>

<script type="text/javascript">

window.onload=function(){

  var otxt=document.getElementById("txt");

  var oshow=document.getElementById("show");

  if(document.all){

     otxt.onpropertychange=function(){

       oshow.innerHTML=otxt.value;

     }

  }

  else{

    otxt.oninput=function(){

      oshow.innerHTML=otxt.value;

    }

  }

}

</script>

</head>

<body>

<div id="show"></div>

<input type="text" id="txt" value="测试"/>

</body>

</html>

vue实现实时监听文本框内容的变化（最后一种为原生js）的更多相关文章

  1. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  2. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  3. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...

  4. vue中实时监听对象或变量的变化

    demo中监听了Input的变化,主要用到的是watch 1. 监听单个对象: <template> <div class="personal-center"&g ...

  5. 第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  7. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

  8. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  9. IOS NSNotificationCenter（通知 的使用）监听文本框的文字改变

    监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...

随机推荐

  1. Xamarin.Forms 自定义 TapGestureRecognizer 附加属性

    While creating Xamarin.Forms applications, definitely you are going to need TapGestureRecognizer oft ...

  2. java基础语法(三大基础)

    一.标识符 标识符是用于包名.类名.变量名.方法名.对象名.数组名.集合名等的命名:   规则: (1)可以使用英文字母.阿拉伯数字.下划线_.$符号 (2)不能以数字开头 (3)不能使用Java中的 ...

  3. Pocket Gem OA: Path Finder

    1. 有向图 找所有start node到end node之间的路径 输入是一个txt 形式如下: A E A : B C D. B : C C : E D : B. 输出一个List<Stri ...

  4. React-typescript-antd 常见问题

    一.The key 'Accept' is not sorted alphabetically //tslint.json { "extends": ["tslint:r ...

  5. 系统学习PHP的一些思路

    作为一名新进的PHPer,迫切的想提高自己的编码水平,目前市面上几乎没有高手来给新手指点出一条相对靠谱的途径. 首先,面对PHP众多杂乱无章的各种函数,到底该怎么去理清其各者之间的关系,经过一段时间的 ...

  6. RESTful API 最佳实践----转载阮一峰

    文章地址http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html

  7. cookiejar

    referer:https://www.cnblogs.com/why957/p/9297779.html文章介绍了四种模拟登陆方法 yield Request()可以将一个新的请求返回给爬虫执行 在 ...

  8. Python 嘉宾列表问题

    某书上的练习题,当作复习8 #3-5 修改嘉宾名单 def alter(someone, other): if someone in din_list: din_list.remove(someone ...

  9. IP通信基础的第一个星期

    IP通信基础不仅是很多专业课程的基础,同时学好它,在以后很多工作上都可以运用到,有网络工程师.通信工程师等等,当然,有些证书也会涉及到IP通信基础,有网络中级高级 CCNA等等. 那么,学好IP通信基 ...

  10. redis参数说明

    感谢网友分享. 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时,Redis默认会把pid写 ...