需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , 和 点击 / 按下 / 滚动 这种事件是一样的, 都是符合条件以后就执行特定代码. 在 vue 里面, 这个功能需要使用 watch.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <input type="text" v-model:value="inputValue" />

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                inputValue: ''

            }

        })

        // $watch 需要在 new Vue({}) 之外声明.

        vApp.$watch("inputValue", function(newValue, oldValue){

            console.log(newValue);

            if (newValue === "88") { alert("拜拜"); }

        })

    </script>

</body>

</html>

怎样使用 Vue 的监听属性 watch ?的更多相关文章

  1. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  2. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 简单vue的监听属性(单位换算)

    单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. vue(七)--监听属性（watch）

    1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...

  5. 第十一篇:vue.js监听属性(大作业进行时)

    这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...

  6. Vue.js 监听属性

    demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

  7. Vue.js：监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  8. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  9. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

随机推荐

  1. solr系列之solr-5.5.5 window单机版默认Jetty安装

    Solr5.5.5单机部署 Solr5和Solr4有很大区别,最为明显的就是Solr5已经可以独立部署,从Solr5开始,Solr已经不再以war包形式部署,Solr已经成为了一个独立的java服务端 ...

  2. Go Iris 中间件

    Iris 中间件 当我们在 iris 中讨论中间件时,我们讨论的是在HTTP请求生命周期中在主处理程序代码之前和/或之后的运行代码. 实现中间件功能,有下面这样两种方式: 方式一: 我们可以通过按顺序 ...

  3. OUC_Summer Training_ DIV2_#7 718

    是18号做的题啦,现在才把报告补上是以前不重视报告的原因吧,不过现在真的很喜欢写报告,也希望能写一些有意义的东西出来. A - Dragons Time Limit:2000MS     Memory ...

  4. psql物化视图自动更新

    更新物化视图示例 CREATE TABLE model.test ( id SERIAL PRIMARY KEY, name VARCHAR(60)); . 创建物化视图 CREATE MATERIA ...

  5. R语言：载入rjava（xlsx）包报错

    先安装JRE,在电脑中添加环境变量: 电脑-右键-属性-高级系统设置-环境变量-用户变量下新建:变量名:JAVA-HOME,变量值:JRE安装路径(到jre1.8***这个文件夹就行了) 系统变量下找 ...

  6. Mac OS为UltraEdit在Terminal中添加快捷使用命令

    一,什么是UltraEdit 我觉得是个程序员,撸代码的都知道UrlEdit是什么.我们在会使用Linux,在Linux中有个很出名的编辑器gedit,使得我们在终端中输入gedit xxx.便可进入 ...

  7. python中requests.session的妙用

    在进行接口测试的时候,我们会调用多个接口发出多个请求,在这些请求中有时候需要保持一些共用的数据,例如cookies信息. 1.requests库的session对象能够帮我们跨请求保持某些参数,也会在 ...

  8. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-9.使用JWT生成用户Token回写客户端

    笔记 9.使用JWT生成用户Token回写客户端     简介:讲解用户授权登录后,需要生成登录凭证重定向到页面上 1.获取当前页面访问地址 2.根据User基本信息生成token 3.重定向到指定页 ...

  9. 前端构建工具gulp使用 (转）

    http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...

  10. kettle mogodb output详解

    以下主要来自官网文档,原文:https://wiki.pentaho.com/display/EAI/MongoDB+Output Configure Connection Tab 1 Host na ...