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. 在windows环境下部署nuxt项目（线上发布部署）

    因为公司项目需要兼容SEO,同时我们也一直希望能够真正的实现前后端分离,于是毫不犹豫的选择了nuxt. 话说要重构前后端分离真是一个大工程,由于各种原因我们团队花了近两年时间都没有完成,最近才又重启把 ...

  2. HTML连载44-标准排版、浮动排版

    一.什么网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页的元素进行排版的 二.标准流排版方式(又称为文档流.普通流) 1.含义 其实浏览器默认的排版方式就是标准流排版方式 2.在CSS中将 ...

  3. Qt Designer布局预览正常，代码调用时所有控件堆在一起

    一.实验环境 1.Windows10x64 2.anaconda4.6.9 + python3.7.1(anaconda集成,不需单独安装) 3.pyinstaller3.5 二.问题描述 1.Qt ...

  4. 大话设计模式Python实现-命令模式

    命令模式(Command Pattern):将请求封装成对象,从而使可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤消的操作. 下面是一个命令模式的demo: #!/usr/bi ...

  5. IT兄弟连 Java语法教程 流程控制语句 循环结构语句2

    双重for循环 如果把一个循环放在另一个循环体中,那么就可以形成嵌套循环,也就是双重for循环,当然嵌套循环也可以是for循环嵌套while循环,也可以是while循环嵌套while循环……,即各种类 ...

  6. 拎壶学python3-----（3）python之while循环用法

    一.下边我们看一个简单的while循环 那怎么计数呢就让输入三次三次后退出: 二. 关于计数这个问题我们一起看一下 (1)关于计数如下: 我们发现这个计数根本停不下来,怎么才能搞成我们想要的计数次数呢 ...

  7. 数据库相关知识积累（sqlserver、oracle、mysql）

    数据库相关知识积累(sqlserver.oracle.mysql) 1. sqlserver :断开所有连接: (还原数据库) 1.数据库  分离 2. USE master GO ALTER DAT ...

  8. go-百度贴吧-纵向爬取

    百度贴吧纵向爬取 上一个是横向爬取的,这个纵向爬取,具体怎么做的看代码 package main import ( "fmt" "io" "net/h ...

  9. Vue-nodeJS环境搭建

    Node.jsNode.js是一个基于Chrome V8引擎的[JavaScript运行环境]. Node.js使用了一个事件驱动.非阻塞式I/O 的模型.Node.js是一个让JavaScript运 ...

  10. python中time、datetime模块的使用

    目录 python中time.datetime模块的使用 1.前言 2.time模块 1.时间格式转换图 2.常用方法 3.datetime模块 python中time.datetime模块的使用 1 ...