<!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. SpringBoot 设置服务一启动就执行、初始化数据

    定义一个类实现ApplicationRunner接口,然后Override这个ApplicationRunner接口的run方法 @Component public class TaskRunner ...

  2. html5调用摄像头截图

    关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...

  3. java类型转换拓展

    数据类型拓展 在Java中二进制用0b开头,八进制用0开头,十六进制用0x表示 整数拓展  int i=10; int i2=010;//八进制 int i3=0x10;//十六进制0x,0-9,A- ...

  4. 【LeetCode】代码模板，刷题必会

    目录 二分查找 排序的写法 BFS的写法 DFS的写法 回溯法 树 递归 迭代 前序遍历 中序遍历 后序遍历 构建完全二叉树 并查集 前缀树 图遍历 Dijkstra算法 Floyd-Warshall ...

  5. 【LeetCode】198. House Robber 打家劫舍 解题报告（Java & Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 递归 + 记忆化 动态规划 优化动态规划空间 ...

  6. 【LeetCode】857. Minimum Cost to Hire K Workers 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/minimum- ...

  7. Anaconda下载与安装

    目录 Anaconda下载与安装 开发环境搭建介绍 Anaconda优势 Anaconda安装 测试安装成功 安装好Anaconda界面 如何启动jupyter 启动后新建文件 执行第一个程序 文件的 ...

  8. Java初学者作业——输入一个五位数字，计算各位数字之和并输出，运行结果为五个数字之和（实践2）

    返回本章节 返回作业目录 需求说明: 编写Java程序,输入一个五位数字,计算各位数字之和并输出,运行结果为五个数字之和. 实现思路: (1)声明变量num,用于存储用户输入的数字. (2)通过Sca ...

  9. HTML5 纯CSS3实现div按照顺序出入效果

    效果: 源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  10. contos mongodb 安装

    创建.repo文件,生成mongodb的源 vi /etc/yum.repos.d/mongodb-org-4.0.repo [mongodb-org-4.0] name=MongoDB Reposi ...