<!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. 源码-DbUtil.java

    package com.tetralogy.util; import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sql.D ...

  2. 聊一下 TS 中的交叉类型

    交叉类型不能完全按照传统编程中的 与 来理解. 交叉类型的定义:将多个类型合并为一个类型,包含了所有类型的特性,而且要同时满足要交叉的所有类型. 后半段话不是很好理解,看一下接口类型和联合类型的交叉类 ...

  3. Dapr项目应用探索

    背景介绍 前面文章对Dapr的基本信息进行了学习,接下来尝试将Dapr应用相关应用中. 接下来一步步实现应用dapr功能. 一.预期效果 如上图应用Dapr点包含: a) 报表服务绑定统一数据源服务: ...

  4. C++代码优化之nim_duilib控件关联

    前言 使用nim_duilib关联控件,优化后.的确减少了代码量,那么,执行效率呢? 时间执行的长短与硬件.软件有关,以下内容仅为参考. 测试代码 下面的代码,分为两部分, 循环使用for,非循环则直 ...

  5. 【LeetCode】338. Counting Bits 解题报告（Python & Java & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目描述 Given a non negati ...

  6. Once Again...

    Once Again... 题目链接 题意 给n个数,然后T次循环后组成一个新的数列,求这个数列的最长不递减子序列. 思路 因为最多就100个元素,所以当m<=100的时候直接暴力求最长不递减子 ...

  7. golang切片的一些自问自答

    你好,我是轩脉刃.这篇是关于go切片的一些问题和回答. go的切片基本上是代码中使用最多的一种数据结构了,使用这种数据结构有哪些要注意的点,这个是非常必要了解的东西.基本上,以前写的一篇博客 http ...

  8. 面试官：this和super有什么区别？this能调用到父类吗？

    本文已收录<Java常见面试题>:https://gitee.com/mydb/interview this 和 super 都是 Java 中常见的关键字,虽然二者在很多情况下都可以被省 ...

  9. 『动善时』JMeter基础 — 59、进行JMeter分布式测试遇到的坑

    目录 1.控制机端 (1)执行机没有关闭防火墙 (2)内存溢出 2.执行机端 (1)启动jmeter-server服务情况一 (2)启动jmeter-server服务情况二 (3)启动jmeter-s ...

  10. ROC and AUC

    目录 概 TPR, FPR ROC and AUC 代码 ROC-wiki 概 AUC常常在文章中作为评价一个分类器优劣的指标, 却总是忘记其原由, 索性记上一笔. TPR, FPR 首先理解TP, ...