watch监听方法,watch可以监听多个变量,具体使用方法看代码:

HTML:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js 使用watch监听实现类似百度搜索功能  </title>

    <script src="vue.js"></script>

    <script src="node_modules/axios/dist/axios.js"></script>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <input type="text" v-model="word">

    <h1>{{result}}</h1>

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        //watch 可以监听多个变量

        watch:{

            //监听word变量

            word:function (newV,oldV) {

                console.log('旧值:'+oldV+'=======>新值:'+newV);

                //这里可以写异步请求我用的是axios

                axios.get('Api.php?word='+newV).then(function (res) {

                    console.log(res,'这是异步返回的值');

                    //这里写异步得到值之后的动作

                    app.result=res.data;

                });

            }

        },

        data:{

            word:'',

            result:''

        }

    });

</script>

</body>

</html>

vue 使用watch监听实现类似百度搜索功能的更多相关文章

  1. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  2. vue mounted中监听div的变化

    vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...

  3. Vue之数据监听存在的问题

    Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...

  4. Vue的watch监听事件

    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. Vue watch 深层监听

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...

  6. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  7. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  8. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  9. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

随机推荐

  1. python之海龟绘图

    1. 基本功能介绍 在海龟作图中,我们可以编写指令让一个虚拟的(想象中的)海龟在屏幕上来回移动.这个海龟带着一只钢笔,我们可以让海龟无论移动到哪都使用这只钢笔来绘制线条.通过编写代码,以各种很酷的模式 ...

  2. 克隆系统后如何重新清除SID

    为什么要清除SID? SID(Security Identifiers,安全标识符)是Windows中标识用户.组和计算机的唯一的号码,Windows操作系统通过SID对计算机和用户进行识别.用户的权 ...

  3. 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 11

    23.6  使用第三方接口服务实例 接供服务的第三方接口平台有很多,现在的项目中也经常用到一些第三方接口,如支付宝.微信.短信.邮件接口等,我们需要借助第三方的能力来实现产品的某些功能.如果自己已经掌 ...

  4. 12-UA池和代理池

    一.UA池和代理池 1.UA池                                      scrapy的下载中间件: 下载中间件(Downloader Middlewares) 位于s ...

  5. copy_from/to_user详解

    参考:http://www.wowotech.net/memory_management/454.html 宋大侠的文章精彩,郭大侠的评论也精彩. 结论简单摘录如下: 无论是内核态还是用户态访问合法的 ...

  6. C++入门到理解阶段二基础篇(6)——C++数组

    概述 C++ 支持数组数据结构,它可以存储一个固定大小的相同类型元素的顺序集合.数组是用来存储一系列数据,但它往往被认为是一系列相同类型的变量. 数组的声明并不是声明一个个单独的变量,比如 numbe ...

  7. PHP JWT token实现

      原文链接:https://www.jb51.net/article/146790.htm   机制:   代码如下:   <?php /**  * PHP实现jwt  */ class Jw ...

  8. 【java提高】(16)---java注解(Annotation)

    java提高(16)---java注解 注解含义注解是JDK1.5之后才有的新特性,它相当于一种标记,在程序中加入注解就等于为程序打上某种标记,之后又通过类的反射机制来解析注解. 一.JDK自带注解 ...

  9. 【OOM】解决思路

    一.什么是OOM? OOM就是outOfMemory,内存溢出!可能是每一个java人员都能遇到的问题!原因是堆中有太多的存活对象(GC-ROOT可达),占满了堆空间. 二.怎么解决? 1.拿到内存溢 ...

  10. 依赖弹出框lhdaiglog的基于WebUploader批量上传图片

    初始上传界面 //链接添加弹窗 html代码段↓ var msgcontent = ""; msgcontent += '<ul class="linkAddBox ...