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 ...
随机推荐
- 构建LVS负载均衡集群——NAT模式（最简单方式）
一.装备一台lvs调度器主机要求两个网卡一个为内部局域网ip,一个为公网ip #IP地址设置过程不再重复 [root@localhost ~]# ip a | grep eth0 #内网ip : et ...
- 用canvas实现手写签名功能
最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器.这样的需求用 canvas 实现是最好的.需要用到 canvas 的以下几个属性: b ...
- 趣谈Linux操作系统学习笔记：第二十五讲
一.mmap原理 在虚拟内存空间那一节,我们知道,每一个进程都有一个列表vm_area_struct,指向虚拟地址空间的不同内存块,这个变量名字叫mmap struct mm_struct { str ...
- mysql--事务详解
事务的四大特性: # 原子性(atomicity) 一个事务必须被视为一个不可分割的最小工作单元,整个事务中的所有操作要么全部提交成功,要么全部失败回滚,对于一个事务来说,不可能只执行其中的一部分操作 ...
- 百度开源的分布式唯一ID生成器UidGenerator，解决了时钟回拨问题
UidGenerator是百度开源的Java语言实现,基于Snowflake算法的唯一ID生成器.而且,它非常适合虚拟环境,比如:Docker.另外,它通过消费未来时间克服了雪花算法的并发限制.Uid ...
- 图解Java常用数据结构
最近在整理数据结构方面的知识, 系统化看了下 Java 中常用数据结构, 突发奇想用动画来绘制数据流转过程. 主要基于 jdk8, 可能会有些特性与 jdk7 之前不相同, 例如 LinkedList ...
- tinker接入
对于热修复无非就是两大类,一类是tencent代表的classloader模式的,另一类是阿里系代表的底层方面替换. 下面以本人的经验介绍下微信的tinker接入: 命令行接入方式: gradle接入 ...
- 前端之CSS1
CSS基本语法和引入方式 CSS介绍 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠 ...
- java基础(11):接口、多态
1. 接口 1.1 接口概念 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成. ...
- Python分页爬取数据的分析
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 向右奔跑 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...