<!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_forms组件用ajax发送数据验证注册

    forms组件 -forms是什么? 就是一个类,可以校验字段(前台传过来的字段) -怎么用: -校验字段功能: -先写一个类,继承Form from django.shortcuts import ...

  2. Python中的不同进制的语法和转换

    不同进制的书写方式 八进制(Octal) 0o377 十六进制(Hex) 0xFF 二进制(Binary) 0b11111111 不同进制之间的转换 python提供了三个内置的函数,能够用来在不同进 ...

  3. MyBatis缓存机制-二级缓存

    MyBatis二级缓存是基于namespace级别的缓存. 1.MyBatis的缓存机制整体设计以及二级缓存的工作模式 如上图所示,当开一个会话时,一个SqlSession对象会使用一个Executo ...

  4. iptables练习题（四）

    设有一台Linux服务器,利用iptables作为防火墙,要求新建一条名为MYCHAIN的新链,来实现只允许开放本机的http服务,其余协议和端口均拒绝. 脚本: [root@miyan ~]# ca ...

  5. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  6. 在w3cschool学完html,css，javascript，jquery以后，还是不会做前端怎么办？

    w3cschool是一个非盈利性的在线技术学习网站,提供按W3C标准编写的基础教程.完整的看完w3cschool上面的手册,可以基本掌握编程语法.基础性的东西通常都会比较零散,因此,在学习一段时间后, ...

  7. 微信小程序学习笔记（2）--------框架之目录结构

    框架提供了自己的视图层描述语言 wxml 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统. 一.响应的数据绑定 框架的核心是一个响应的数据绑定 ...

  8. BZOJ 一句话题解

    菜鸡刷题记录 [题号:题解] 1008:简单排列组合 #include <bits/stdc++.h> using namespace std; #define ll long long ...

  9. POJ 2253 Frogger （Dijkstra变型)

    题意:求点1到点2的路径中,权值最大的那条边,其最小值是多少. 分析:最大值最小化.可以将迪杰斯特拉模板中的松弛操作加以修改,在O(n^2)的时间内解决该问题.其中需要注意的是,dist[i]指的是: ...

  10. POJ - 2912 Rochambeau (带权并查集+枚举)

    题意:有N个人被分为了三组,其中有一个人是开了挂的.同组的人的关系是‘=’,不同组的人关系是‘<’或'>',但是开了挂的人可以给出自己和他人任意的关系.现在要根据M条关系找出这个开了挂的人 ...