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. BZOJ2007/LG2046 「NOI2010」海拔 平面图最小割转对偶图最短路

    问题描述 BZOJ2007 LG2046 题解 发现左上角海拔为 \(0\) ,右上角海拔为 \(1\) . 上坡要付出代价,下坡没有收益,所以有坡度的路越少越好. 所以海拔为 \(1\) 的点,和海 ...

  2. WPF/C# 快捷键 自动生成方法

    原文:WPF/C# 快捷键 自动生成方法 这一篇文章会很短~ 在写依赖属性的会后   propdb 会自动生成依赖属性所有的内容 但是如果我写属性变化通知的时候   希望有一个快捷键能自动生成方法 怎 ...

  3. WPF 后台获得 数据模板里的内容控件（DataTemplate）

    原文:WPF 后台获得 数据模板里的内容控件(DataTemplate) 假如      <Window.Resources> 里 有一个 Datatemplate 我想获得TextBlo ...

  4. The Three Rules/Laws of TDD

    You are not allowed to write any production code unless it is to make a failing unit test pass. 除非为了 ...

  5. Linux 学习记录一(安装、基本文件操作).

    Linux 名字的由来,是当时作者将初版的 Linux 发布在网上,供别人下载完善,而那个核心文件夹就叫 Linux,就这么叫着了.而为什么 Linux 的吉祥物是一只企鹅呢?是因为当时大家要发行稳定 ...

  6. 实用小工具：VNC的安装

    安装xen时,需要使用vnc工具来进行图形化安装,安装好后启动失败,试了很多办法,最终解决. 1.使用yum安装:yum install tigervnc-server tigervnc-server ...

  7. 基于 Swoole 的轻量级框架 CabalPHP

    CabalPHP CabalPHP 是一个基于Swoole的轻量.高效.全异步开源框架. 亮点 全异步单机超高性能,轻松分布式部署 支持HTTP.TCP.websocket等多种协议 完善数据库引擎, ...

  8. 关于Django

    Django项目的初始化配置包括 数据库配置 Django 配置 应用程序配置 关于项目和应用 应用是一个专门做某件事的网络应用程序——比如博客系统,或者公共记录的数据库,或者简单的投票程序 项目则是 ...

  9. 邮件hMailServer +Foxmail 安装使用教程

    hMialServer是Windows下一款免费开源的邮件服务器软件,支持smtp.pop3.imap. 本文主要根据官方文档Quick-Start guide整理而成. 一.下载 下载地址:http ...

  10. go-运算符

    算术运算符 ++,--只能放在变量后面,不能放在前面 独立使用 目的:更简洁 go语言不支持三元运算符 键盘输入 fmt.scanln 会在换行时扫描,所以最后一个条目必须换行或达到结束位置 fmt. ...