<!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 整合activemq

    1.配置连接信息 spring: activemq: broker-url: tcp://192.168.1.28:61616 user: admin password: 123456 package ...

  2. JAVA获取某个月(当月)第一天的开始时刻和某个月(当月)最后一天的最后时刻

    package com.date; import java.text.SimpleDateFormat; import java.util.Calendar; public class Test { ...

  3. 【LeetCode】1180. Count Substrings with Only One Distinct Letter 解题报告(C++)

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

  4. 【LeetCode】394. Decode String 解题报告（Python）

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

  5. PLSQL到期处理

    一.输入指令"regedit"打开注册表 二.指令输入完毕后,按回车键,会进入这个界面. 三.注册表里按HKEY_CURRENT_USER\Software\Allround Au ...

  6. java-git 暂存

    在接到需求以后,直接在master上开发了,到提交的时候才想起来忘记新建版本分支了,直接提交到master会影响到其他人. 这时候就想着将本地编辑的代码,没有提交的代码暂存起来,然后新建一个新分支,再 ...

  7. MySQL数据操作与查询笔记 • 【第5章 MySQL 函数】

    全部章节   >>>> 本章目录 5.1 数学函数和控制流函数 5.1.1 数学函数 5.1.2 控制流函数 5.2 字符串函数 5.2.1 字符串函数介绍 5.2.2 字符串 ...

  8. SpringCloud集成Security安全(Eureka注册中心)

    1.说明 为了保护注册中心的服务安全, 避免恶意服务注册到Eureka, 需要对Eureka Server进行安全保护, 本文基于Spring Security方案, 为Eureka Server增加 ...

  9. shell2-if判断

    1.条件测试类型(判断类型): 将测试结果做为判断依据. 测试类型有以下三种   [ 命令 ] :命令测试法(最常用的)  [[ 命令 ]] : 关键字测试 test 命令 以上是三种都可以,注意单词 ...

  10. CSS基础 transform属性的基本使用 移动 旋转 缩放

    1.实现元素位移效果 语法:transform:translate(x轴水平移动距离,Y轴垂直移动距离) 取值:正负都可以 取值方式:数字+px 百分比 :参照自己本的盒子的百分比 比如:本身自己的宽 ...