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. Hbase启动出问题 master.HMaster: Failed to become active master

    Hbase启动出问题 2019-12-15 09:59:57,183 WARN [hadoop:16000.activeMasterManager] hdfs.DFSClient: DFS Read ...

  2. <Array> 309 (高)334

    309. Best Time to Buy and Sell Stock with Cooldown class Solution { public int maxProfit(int[] price ...

  3. Python变量与内存管理

    Python变量与内存管理 –与C语言中的变量做对比,更好的理解Python的变量. 变量 变量在C语言中  全局变量:其存放在内存的静态变量区中.  局部变量:代码块中存放在内存的代码区当中,当被调 ...

  4. 创 PHP RSA2 签名算法

        什么是RSA2 ? RSA2 是在原来SHA1WithRSA签名算法的基础上,新增了支持SHA256WithRSA的签名算法. 该算法比SHA1WithRSA有更强的安全能力. 为了您的应用安 ...

  5. C#判断dataGridView1 点击的是哪一列上的按钮

    private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e) { ) { DataGr ...

  6. C# - VS2019通过重写pictureBox实现简单的桌面截图功能

    前言 通过创建客制化组件(继承pictureBox),新增属性和构造方法,实现屏幕截图时需要用到的功能点.再通过监控鼠标按下.移动和释放,来获取起始点区域.最后通过操作BMP图像,实现截图的新增.修改 ...

  7. c#中取绝对值

    记一次工作中查询的资料: System.Math.Abs(float value); System.Math.Abs(decimal value); System.Math.Abs(int value ...

  8. python基础(3):变量、常量、注释、基本数据类型

    1. 变量 变量:将运算的中间结果暂存到内存,以便后续程序调⽤. 可以直接运算,如下所示: print(3+5+6) print((3+5+6)*12) print(((3+5+6)*12)+3) p ...

  9. 搭建RTMP直播流服务器

    最近项目比较紧张,所以没什么时间写博客,正好这几天没什么事,赶紧记录下自己最近所学. 环境配置 服务器选用 服务器我选择的是小鸟云 ,原因很简单,他的个人用户有3个月免费使用时间. 服务器环境 Win ...

  10. HTTP相关知识总结

    HTTP协议特点 支持客户端/服务器模式 简单快速 灵活.允许传输任意类型的数据对象 限制每次连接只处理一个请求(http最初设计思想,现在为了提升传输效率,一次请求完成后不会立即断开连接) 无连接: ...