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. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  7. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  8. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

随机推荐

  1. java加密解压类库

    java压缩类库_支持加密解压.zip public static void unzip(File zipFile, String dest, String passwd) throws ZipExc ...

  2. WPF控件经验小结:(1) ToolBar去掉右边箭头(扩展图标)

    今天开发时,同事问我一个问题.怎么去除ToolBar右边扩展图标.我想了一下,说改Style.同事说太麻烦了.可不可以快速修正.我说应该动态去读取Template模板中的Style,然后隐藏.怎么实现 ...

  3. BZOJ 1024: [SCOI2009]生日快乐

    Description 将一个 \(x\times y\) 的矩形分成 \(n\) 块,让最长边:最短边 最小. Sol 搜索. \(n\) 只有 \(10\) 写一个类似于记搜的东西就好了. Cod ...

  4. git clone 远程分支

    先初始化一个git 仓库  命令:git init git clone 相应的地址 这样就会形成一个.git 隐藏文件夹 一定要注意的,要进入到子文件夹去git checkout feature/0. ...

  5. Linux 上的数据可视化工具

    Linux 上的数据可视化工具 5 种开放源码图形化工具简介 Linux® 上用来实现数据的图形可视化的应用程序有很多,从简单的 2-D 绘图到 3-D 制图,再到科学图形编程和图形模拟.幸运的是,这 ...

  6. python中重要的模块--asyncio

    一直对asyncio这个库比较感兴趣,毕竟这是官网也非常推荐的一个实现高并发的一个模块,python也是在python 3.4中引入了协程的概念.也通过这次整理更加深刻理解这个模块的使用 asynci ...

  7. 学习flexible.js

    flexible是手淘团队总结的一套移动端适配方案,这篇文章是自己对flexible学习历程的记录,也算是一个备忘. https://github.com/amfe/article/issues/17 ...

  8. python粗谈面向对象(一)

    1.面向过程编程vs函数式编程 面向过程编程 以计算对象的元素个数为例. str_1 = 'abcdefg' count = 0 for i in str_1: # 统计字符串元素个数 count + ...

  9. AJAX如何实现和后端的交互(网页如何与 web 服务器进行通信)

    在这里我们将会用一个姓名提示框案例来简单说明: 当用户在输入框中键入字符时,网页与 web 服务器进行通信,服务器返回提示信息,传给网页: 先看一下界面: 在html页面中: 思路:就是当用户在上面的 ...

  10. Matlab小波工具箱的使用2

    Matlab小波工具箱的使用2 (2011-11-11 09:32:57) 转载▼ http://blog.sina.com.cn/s/blog_6163bdeb0102dw7a.html#cmt_5 ...