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 ...
随机推荐
- Go 变量(var) & 常量(const)
变量 声明变量格式: var var_name var_type 变量在声明时会自动初始化: 数字: 0 string: "" bool: false 引用类型: nil 结构体: ...
- Codeforces Round #603 (Div. 2) B. PIN Codes 水题
B. PIN Codes A PIN code is a string that consists of exactly 4 digits. Examples of possible PIN code ...
- [题解向] CF#Global Round 1の题解(A $\to$ G)
这里是总链接\(Link\). \(A\) 题意:求\(\sum_{i=1}^{k} a_i\times b^{k-i}\)的奇偶性, \(k = \Theta(n \log n)\) --其实很容易 ...
- 细数使用View UI（iView）开发中遇到的坑
一.前言 View UI,即原先的 iView,是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 官网地址:https://www.iviewui.com/docs ...
- 使用Redis实现最近N条数据的决策
前言 很多时候,我们会根据用户最近一段时间的行为,做出一些相应的策略,从而改变系统的运动轨迹. 举个简单的例子来说明一下: 假设A公司现在有两个合作伙伴(B和C),B和C都是提供天气数据的,现在A公司 ...
- -ffast-math编译选项作用
https://stackoverflow.com/questions/7420665/what-does-gccs-ffast-math-actually-do
- 前端之jquery2
jquery属性操作 1.html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').htm ...
- Python爬取猫眼电影《飞驰人生》47858万条评论并对其进行数据分析
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: Yura不说数据说 ,PYuraL PS:如有需要Python学习资 ...
- 这可能最简单的一种PS图片特效，零基础小白教程
不少小伙伴都想学习PS,可是又觉得PS很难,学了一段时间却还是做不出什么惊艳的效果,没关系!小编今天就来教大家做一个超级简单的图片特效,就算是小白也能轻松学会!我们先来看看图片效果~ 想知道怎么做吗? ...
- CSS边框使用-基础
前端开发工作中经常会碰到奇形怪状的图形,当然也少不了UI设计童鞋的脑洞和创意啦,初级的开发人员可能会选择使用图片做背景加上位置属性实现,不过很多时候,CSS能实现的就不要再动用PS等工具了,时间宝贵, ...