<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>watch监听属性变化实现类百度搜索栏功能</title>

    <script src="vue.js"></script>

    <script src="node_modules/axios/dist/axios.js"></script>

</head>

<body>

<div id="lantian">

    <input type="text" v-model="word"/>

    <h1>

        结果：{{result}}

    </h1>

</div>

<script>

    var app = new Vue({

        el: '#lantian',

        watch: {

            word: function (newV, oldV) {

                //console.log(newV+'=>'+oldV);//输出：新值和旧值

                //使用axios发送请求，需要安装node.js。在使用：npm install axios 安装axios

                axios.get('9.php?word=' + newV).then(function (response) {

                    console.log(response);

                    app.result=response.data;

                });

            }

        },

        data: {

            word: '',

            result: ''

        }

    });

</script>

</body>

</html>

　　9.php中的代码：

<?php

echo "你搜索的内容是：".$_GET['word'];

　　

009——VUE中watch监听属性变化实现类百度搜索栏功能的更多相关文章

  1. 09.1.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回数组

    09.1html里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  3. Vue.js：监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  4. vue项目如何监听窗口变化，达到页面自适应？

    [自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...

  5. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  6. 对于单页应用中如何监听 URL 变化的思考

    周末开发了一个在 GitHub 中给 repo 增加自定义备注的 chrome 扩展. 开发这个扩展的原因是我在 GitHub 中所 star 的项目实在太多了(截止目前 671 个),有的项目过个几 ...

  7. vue中实时监听对象或变量的变化

    demo中监听了Input的变化,主要用到的是watch 1. 监听单个对象: <template> <div class="personal-center"&g ...

  8. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...

  9. vue中实时监听移动端屏幕高度（采坑后实践）

    最近做微信公众号活动,需要首页往input中输入内容,点击input软键盘tabbar被顶起来,网上借鉴很多(踩了许多坑)最后自己实践出来. <--!将手机屏幕的默认高度和实时高度获取--> ...

随机推荐

  1. Django HttpRequest对象详解

    WSGIRequest对象 Django在接收到http请求之后,会根据http请求携带的参数以及报文信息创建一个WSGIRequest对象,并且作为视图函数第一个参数传给视图函数.也就是我们经常看到 ...

  2. Python（装饰器）

    eval 内容从字符串中提取出来,用Python运行一遍__name__得到函数名字 闭包函数 定义: 函数内部定义的函数称为内部函数 该内部函数包含对外部作用域,而不是对全局作用域的名字的引用 那么 ...

  3. 常用的Issue解决方案(EF框架)

    1.提交出错:ObjectStateManager 中已存在具有同一键的对象.    ObjectStateManager 无法跟踪具有相同键的多个对象. 遇到此问题,首先要确定的是主键是否赋值,以及 ...

  4. ceph存储安装配置

    1.修改yum源: 1.安装yum源:sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://dl.fedor ...

  5. 【c++ primer, 5e】类的其他特性（卒）

    1 - Class Members Revisited 2 - Functions That Return *this 3 - Class Types 4 - Friendship Revisited ...

  6. MySQL-5.7 创建及查看触发器

    触发器的作用是当表上有对应SQL语句发生时,则触发执行. 1.语法 CREATE [DEFINER = { user | CURRENT_USER }] TRIGGER trigger_name tr ...

  7. CC3中的2D转换

    2D转换方法: translate() rotate() scale() skew() matrix() 1.translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 ...

  8. tesseract编译各种 “锟斤拷” 等中文乱码 编译失败问题

    编译tesseract - ocr时 各种不通过 也很疑惑,完全按照官方指导来的啊 首先以为是vs的编码问题,随切换选项-切换Unicode或多编码字符集,但仍无效. 定位到乱码的文件,用notepa ...

  9. 20165101 实验二 Java面向对象程序设计

    20165101 实验二 Java面向对象程序设计

  10. 通过excel快速拼接SQL

    “哎,发你一个excel,把这几百条数据修复喽.”经理喊道. “嗯,好的!” 正在看资料的我被经理临时分的任务打断,搞吧!这就是我平时中的一个工作场景. 工作中总是会遇到要修复数据,数据在excel中 ...