<!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. 使用win32ole进行页面加载和跳转

    require "win32ole" #包含库 ie = WIN32OLE.new('internetExplorer.Application') ie.visible = tru ...

  2. SQL SERVER常见等待——解决会话等待产生的系统问题

    SQL SERVER——解决会话等待产生的系统问题 转自: https://blog.csdn.net/z_cloud_for_SQL/article/details/55051215 版权声明:SQ ...

  3. HTML5之WEB Storage

    什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...

  4. 0409-服务注册与发现-Eurek Ribbon Feign常见问题及解决

    一.Eureka 1.1.Eureka Environment的配置: eureka.environment: 字符串 参考文档: https://github.com/Netflix/eureka/ ...

  5. java实现简单邮件的发送以及常见问题

    java实现简单邮件的发送以及常见问题 最近遇到个需求需要实现发送邮件的功能,以前做发送邮件功能都是有邮箱用户名密码,通过用户名密码连接对应的SMTP服务器来实现邮件的发送.但是这次用公司内部的邮箱, ...

  6. PAT 天梯赛 L1-042. 日期格式化 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-042 AC代码 #include <iostream> #include <cstdio&g ...

  7. LeetCode 53. Maximum Subarray 最大连续字段和问题

    考察:最大连续字段和问题. 解决问题时间复杂度:O(n) 问题隐含条件:如果给出的数集都是负数,那么最大连续字段和就是,最大的那个负数. eg:{-2,-1}  结果应该输出 -1 而不是 0 int ...

  8. html 基础 超链接

    ***设置超链接的样式示例  a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 a:active 点击超链接时 在定义这些状态时,有一个顺序l v ...

  9. top下的快捷键

    M —根据驻留内存大小进行排序 P —根据CPU使用百分比大小进行排序 T —根据时间/累计时间进行排序 c —切换显示命令名称和完整命令行 t —切换显示进程和CPU信息 m —切换显示内存信息 l ...

  10. Oracle---------coalesce的用法介绍

    COALESCE (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值.如果所有的表达式都是空值,最终将返 ...