需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 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. qt+opencv编译环境的配置

    第一步:安装与配置Qt 从https://account.qt.io/downloads下载Qt,并注册账户.开始安装.首先下载qt-opensource-windows-x86-mingw482_o ...

  2. P4095 [HEOI2013]Eden 的新背包问题

    P4095 [HEOI2013]Eden 的新背包问题 题解 既然假定第 i 个物品不可以选,那么我们就设置两个数组 dpl[][] 正序选前i个物品,dpr[][] 倒序选前i个物品 ,价格不超过 ...

  3. 前端知识点回顾之重点篇——ES6的Iterator和Generator

    Iterator 迭代器是一种接口.是一种机制. 为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iter ...

  4. leetcode1283 使结果不超过阈值的最小除数

    这道题第一思路是用二分查找 因为使用二分法:所以复杂度为O(n*logk), k介于 left=sum/threshold(向下取整) 和 right=num_max之间:而right<=10^ ...

  5. OpenAPI规范入门

    由于API对于我们的软件运行方式至关重要,因此记录我们的API对于确保我们大型IT组织中的每个人都了解正在发生的事情至关重要,这就是我们使用OpenAPI来帮助记录API规范的原因. 在本文中,我将向 ...

  6. 用Python计算三角函数之acos()方法的使用

    用Python计算三角函数之acos()方法的使用 acos()方法返回x的反余弦值,以弧度表示. 语法 以下是acos()方法的语法:     acos(x) 注意:此函数是无法直接访问的,所以我们 ...

  7. JAVA 基础编程练习题9 【程序 9 求完数】

    9 [程序 9 求完数] 题目:一个数如果恰好等于它的因子之和,这个数就称为"完数".例如 6=1+2+3.编程找出 1000 以内的 所有完数. package cskaoyan ...

  8. c++空类为什么占用1个字符

    在C++中空类会占一个字节,这是为了让对象的实例能够相互区别.具体来说,空类同样可以被实例化,并且每个实例在内存中都有独一无二的地址,因此,编译器会给空类隐含加上一个字节,这样空类实例化之后就会拥有独 ...

  9. Git学习教程三之分支管理

    实战流程: 1:代码库克隆一份至本地 2:新分支操作 2.1  在需要的文件中创建并指向新的分支方便写代码  git checkout -b <name>                2 ...

  10. JAVA_day1_变量和常量

    JAVA变量和常量 一.JAVA中的关键字 注:关键字区分大小写,Try不是关键字而try则是. 二.JAVA标识符 1.标识符:标识符就是用于给 Java 程序中变量.类.方法等命名的符号. 2.标 ...