<!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. pl/sql属性类型

    pl/sql 属性类型 %TYPE - 引用变量和数据库列的数据类型 %ROWTYPE - 提供表示表中一行的记录类型 显示输出scott.emp表中的部分数据 declare emp_number ...

  2. JAVA中Map集合遍历

    for (Map.Entry<String, String> entry : map.entrySet()) { System.out.println("key= " ...

  3. ubuntu ffmpeg 转码错误

    [aac @ 0xde2400] The encoder 'aac' is experimental but experimental codecs are not enabled, add '-st ...

  4. 【LeetCode】1154. Day of the Year 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 计算1月1号之间天数 日期 题目地址:https:// ...

  5. 【九度OJ】题目1052：找x 解题报告

    [九度OJ]题目1052:找x 解题报告 标签(空格分隔): 九度OJ [LeetCode] http://ac.jobdu.com/problem.php?pid=1052 题目描述: 输入一个数n ...

  6. 【LeetCode】846. Hand of Straights 解题报告（Python & C+）

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

  7. Matrix(poj2155)

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 25139   Accepted: 9314 Descripti ...

  8. 1052 - String Growth

    1052 - String Growth    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Z ...

  9. javaScript系列 [43]-TS、Class and ES5

    本文讨论Typescript中的Class同ES5构造函数的对应关系,涉及TypeScript的诸多语法.构造函数.面向对象以及原型对象等相关知识点细节,本文只简单对比并不进行深入展开. TypeSc ...

  10. SQLServer中的CTE(Common Table Expression)通用表表达式使用详解

    概述 我们经常会编写由基本的 SELECT/FROM/WHERE 类型的语句派生而来的复杂 SQL 语句.其中一种方案是需要编写在 FROM 子句内使用派生表(也称为内联视图)的 Transact-S ...