<!DOCTYPE html>

<html lang='en'>

<head>

 <meta charset='UTF-8'>

 <meta http-equiv='X-UA-Compatible' content='IE=edge'>

 <meta name='viewport' content='width=device-width, initial-scale=1.0'>

 <script src='https://unpkg.com/vue/dist/vue.js'></script>

 <title></title>

</head>

<body>

 <div id='app'>

   <div>

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

   </div>

   <div>

    <span>推荐的关键字：</span>

    {{result}}

   </div>

 </div>

 <script>

    new Vue({

     el:'#app',

     data:{

      keyword:"",

      result:"",

     },

     watch:{

       keyword(newValue,oldValue){

        this.result='正在加载中.....'

        setTimeout(() =>{

          this.result = "推荐的结果："+newValue

        },1000);

       }

     }

   }

)

</script>

</body>

</html>

　　

vue学习11-监听属性的更多相关文章

  1. 009——VUE中watch监听属性变化实现类百度搜索栏功能

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

  2. Vue.js：监听属性

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

  3. Vue学习之监听methods、watch及computed比较小结（十一）

    一.三者之间的对比: 1.methods方法表示一个具体的操作,主要书写业务逻辑: 2.watch:一个对象,键是需要观察的表达式,值是对应回调函数.主要用来监听某些特定数据的变化,从而进行某些具体业 ...

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

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

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

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

  6. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  7. vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  8. Vue计算属性和监听属性

    一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...

  9. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

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

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

随机推荐

  1. JavaScript 判断变量是否为空---三元运算,元组获取值-重组.map()。

    var from_days = getQueryString('from_days'); undefined {'from_days': (from_days) ? from_days : null} ...

  2. [C# Expression] 之动态创建表达式

    上一篇中说到了 Expression 的一些概念性东西,其实也是为了这一篇做知识准备.为了实现 EFCore 的多条件.连表查询,简化查询代码编写,也就有了这篇文章.   在一些管理后台中,对数据进行 ...

  3. Flutter学习(9)——Flutter插件实现(Flutter调用Android原生

    原文地址: Flutter学习(9)--Flutter插件实现(Flutter调用Android原生) | Stars-One的杂货小窝 最近需要给一个Flutter项目加个apk完整性检测,需要去拿 ...

  4. sigslot之简化版

    1.关于 1.1 基于原版sigslot做了部分修改.原版的信号支持最多支持8个参数,改进后,最多支持1个参数,这样肯定不能满足日常需求,但是,我们可以将信号的一个参数改为类型指针,比如信号定义时的模 ...

  5. 【LeetCode】1086. High Five 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 大根堆 日期 题目地址:https://leetcod ...

  6. 【LeetCode】728. Self Dividing Numbers 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 循环 filter函数 数字迭代 日期 题目地址:h ...

  7. mac学习Python第一天：安装、软件说明、运行python的三种方法

    一.Python安装 从Python官网下载Python 3.x的安装程序,下载后双击运行并安装即可: Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的. MAC 系统一般 ...

  8. Myeclipse查看jdk源代码

    过程如下: 1.点 "window"-> "Preferences" -> "Java" -> "Install ...

  9. Java 计算加几个月之后的时间

    Java 计算加几个月之后的时间 public static Date getAfterMonth(String inputDate,int number) { Calendar c = Calend ...

  10. HMS Core电商与游戏行业解决方案，全流程赋能开发者创新

    2021年12月29日,"华为云&华为终端云服务创新峰会2022"在北京柏悦酒店成功举办.华为HMS Core电商与游戏行业解决方案亮相本次峰会的线下展区,为行业开发者们解 ...