vue 使用watch监听实现类似百度搜索功能
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监听实现类似百度搜索功能的更多相关文章
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue watch 深层监听
Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
随机推荐
- 《移动WEB前端高级开发实践@www.java1234.com.pdf》
HTTP服务器: http-server 3.6.4 利用 Performance API 分析网站性能 页面加载生命周期 4. CSS3 伪类.伪元素, 看https://www.runoob.co ...
- 请不要嘲笑你身边那些投了P2P的朋友
在这方面我是非常谨慎的,但依然逃脱不了翻车的命运 这段时间曾经无数大V强烈推荐的懒投资出现大面积逾期,又把这个行业推上了风口浪尖,这里讲一讲我的故事 对于大多数人的理财投资可能是从2013年余额宝的推 ...
- k8s发布文件记录
1.环境变量配置项 apiVersion: v1 # api版本 kind: ConfigMap # 配置项 metadata: name: common-key-svc # 名字 namespace ...
- linux--解决anaconda升级pip问题
Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项. 在用pip install命令安装东西时,有时会提示如下错误:升级pip You ...
- IT兄弟连 Java语法教程 数组 经典案例
案例需求: 编程实现双色球中奖号码的生成 1)应用知识: ● 数组的声明 ● 数组的使用 ● for循环 2)需求解析: 在该程序中,需要定义一个长度为7的数组,用来存储中奖号码,使用Rando ...
- H3C DRNI学习
DRNI:Distributed Resilient Network Interconnect,分布式弹性网络互连.DR:分布式聚合接口IPP:内部控制链路端口IPL:内部控制链路DRCP报文:分布式 ...
- java基础(28):数据库、表及表数据、SQL语句
1. 数据库 1.1 数据库概述 什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据进行增加,修改,删除及查询操作. 什么是数据库 ...
- django接口文档自动生成
django-rest_framework接口文档自动生成 只针对用到序列化和返序列化 一般还是用第三方yipi 一.安装依赖 pip3 install coreapi 二.设置 setting.py ...
- HTTP面试常见题
1.HTTP2.0.1.1.1.0.0.9的区别? 答:HTTP0.9:是HTTP协议的第一个版本,只允许发送get请求,并且不支持请求头.一次请求对应一次响应.是短连接. HTTP1.0:相比于0. ...
- JS基础语法---函数---介绍、定义、函数参数、返回值
函数: 把一坨重复的代码封装,在需要的时候直接调用即可 函数的作用: 代码的重用 函数需要先定义,然后才能使用 函数名字:要遵循驼峰命名法 函数一旦重名,后面的会把前面的函数覆盖 Ctrl +鼠标左键 ...