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. 《2018：skymind.ai 发布了一份非常全面的开源数据集》

    这是一份非常全面的开源数据集,你,真的不想要吗?   近期,skymind.ai 发布了一份非常全面的开源数据集.内容包括生物识别.自然图像以及深度学习图像等数据集,现机器之心将其整理如下:(内附链接 ...

  2. Codeforces Round #599 (Div. 1) C. Sum Balance 图论 dp

    C. Sum Balance Ujan has a lot of numbers in his boxes. He likes order and balance, so he decided to ...

  3. 【Notepad++】notepad++主题和字体设置（非常好看舒服的）

    #效果图 1.字体:Courier New 字号:14号字体 2.字体:Consolas 字号:14号字体 #设置方法 1.设置---语言格式设置 2.选择主题,同时勾选“使用全局字体”“使用全局字体 ...

  4. 还在担心网聊相亲的小姐姐，美女变恐龙！Python帮你"潜伏"侦查

    ​ 最近,小编的一个朋友很是苦恼,他在Python交流的群里,认识了一个妹子,看头像感觉挺不错的,大家都喜欢摄影,蛮谈得来的!但是想要约见面却不敢,因为他看过<头号玩家>,深知躲在电脑背后 ...

  5. 【shell脚本】自动磁盘分区，格式化，挂载===autoMount.sh

    #!/bin/bash # 自动对磁盘分区.格式化.挂载 # 对虚拟机的 vdb 磁盘进行分区格式化,使用<<将需要的分区指令导入给程序 fdisk # n(新建分区),p(创建主分区), ...

  6. SqlServer ----- 拷贝数据表

    两种方式,第一种方式只是把表中的字段进行拷贝,第二种把表中的关联关系,主键自增长全部拷贝. 1.把表中的关联关系,主键自增长全部拷贝. 选择需要拷贝的表,点击编辑器窗口,会看到这个表的sql 语句,主 ...

  7. 2019_JAVA面试题_真实总结

    来自刚被某互联网公司录取的朋友的分享. 整理的面试题1: 1.Java里面有哪几种基础数据类型, 2.Char为何是两个字节, 3.Object有哪些方法 4.final修饰变量,函数,类的作用, 5 ...

  8. Django---SETTINGS配置(***)

    Django---SETTINGS核心配置项 django核心配置项 Django的默认配置文件中,包含上百条配置项目,其中很多是我们'一辈子'都不碰到或者不需要单独配置的,这些项目在需要的时候再去查 ...

  9. 图片在DIV里边水平垂直居中

    图片在一个DIV中要垂直水平居中,首先定义一个DIV .wrap{ width: 600px; height: 400px; border: 1px #000 solid; } 插入图片 <di ...

  10. JavaScript 数学

    JavaScript Math 数学 神奇的圆周率 Math.PI ; // 返回 3.1415926535-- Math 数学方法 Math.round() Math.round(X):返回 X 的 ...