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. Codeforces Round #594 (Div. 1) A. Ivan the Fool and the Probability Theory 动态规划

    A. Ivan the Fool and the Probability Theory Recently Ivan the Fool decided to become smarter and stu ...

  2. ubuntu18.04 中个性化配置vim方法

    1:新建配置文件 在终端里输入:vi ~/.vimrc (vimrc是vim的配置文件,每次打开vim时会自动加载这个文件里的配置) 2:配置的代码如下:直接就可以复制到里面然后保存就行 set ai ...

  3. 【STM32H7教程】第26章 STM32H7的TCM，SRAM等五块内存的超方便使用方式

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980  第26章       STM32H7的TCM,SRAM等五块 ...

  4. SQL Server查询某个表被哪些存储过程调用

    问题描述: 今天有个同事问到如何查询某个表被哪些存储过程调用, 然后同事说可以用SQL search查询,自己试了一下确实可以 sqlsearch下载说明地址:https://www.cnblogs. ...

  5. keras EfficientNet介绍，在ImageNet任务上涨点明显 | keras efficientnet introduction

    本文首发于个人博客https://kezunlin.me/post/88fbc049/,欢迎阅读最新内容! keras efficientnet introduction Guide About Ef ...

  6. Java匹马行天下之学编程的起点——高级语言大锅烩

    学编程的起点——高级语言大锅烩 前言: 学知识前总想说点鸡汤,想喝的朋友就看看,不想喝的就直接看干货吧,就当鸡汤是给我自己喝的. 前段时间在网上看了一句话感觉挺触动我的,我做个分享: 如果你觉得你的祖 ...

  7. solr集群Server refused connection at: http://127.0.0.1:6060/solr/ego 注册zookeepr自动使用内网ip

    引导:适用于各种注册服务,zookeeper和被注册的服务器不在同一ip上,产生的注册了127.0.0.1本地ip地址 在使用solr集群操作的时候,报了如下的错误 org.apache.solr.c ...

  8. 解决真机编译出现System.DllNotFoundException: 'libmono-native.so'错误都方法

    1.去掉勾选:使用共享运行时 2 检查android SDK是否安装了NDK 3.使用真机运行编译APK

  9. 基础查询-SQL和Linq相互化

    目录 SELECT SQL SELECT DISTINCT 语句 WHERE 和 操作符 BETWEEN 和操作符 LIKE 和通配符 ORDER BY 排序 TOP In Alias(as) EXI ...

  10. LinuxShell脚本——循环结构

    LinuxShell脚本——循环结构 摘要:本文主要学习了Shell脚本中的循环结构. while循环 基本语法 while循环是最简单的一种循环,如果条件满足则执行循环里的语句,如果条件不满足则退出 ...