vue笔记-----简单的vue-resource动态获取数据

古城微笑少年丶 2022-06-02 03:07 98阅读 0赞

用vue模拟百度搜索，一部分代码

<script src="./vue-1.0.28.js"></script> <script src="./js/vue-resource.min.js"></script> <style> .gray{ background:#ccc; } </style> </head> <body> <div id="box"> <input type="text" v-model="msg" @keyup="show($event)" @keydown.up.prevent='changeup' @keydown.down="changedown"> <ul v-if="newdata.length"> <li v-for="val in newdata" :class={gray:$index==nowIndex}>{ { val}}</li> </ul> <ul v-else> <li>暂无数据。。。。</li> </ul> </div> <script> var c =new Vue({ el:"#box", data:{ center:"center", msg:"", newdata:[], nowIndex:-1 }, methods:{ show:function(e){ if(e.keyCode==38||e.keyCode==40)return; if(e.keyCode==13){ window.open("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+c.msg); c.msg=""; } this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", { params:{ wd:c.msg }, jsonp:'cb' }).then(function(res){ this.newdata=res.data.s; },function(res){ console.log(res)}); }, changeup:()=>{ c.nowIndex--; if(c.nowIndex<0){ c.nowIndex=c.newdata.length-1; } c.msg=c.newdata[c.nowIndex]; }, changedown:()=>{ c.nowIndex++; // console.log(c.nowIndex) if(c.nowIndex==c.newdata.length){ // console.log(c.nowIndex) c.nowIndex=0; } c.msg=c.newdata[c.nowIndex]; } } }) </script> </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，98人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue获取div中的数据

<div> <button @click="addNum(currentVal)">-</button>

左手的ㄟ右手/ 2022年11月07日 11:35/ 0 赞/ 159 阅读

相关 echarts ajax 动态获取数据

keys 和 values 都是动态数据注意如果数据是{value:335, name:'直接访问'}这种格式需要使用eval('(' + strtojso

末蓝、/ 2022年09月30日 00:59/ 0 赞/ 184 阅读

相关获取动态加载ajax的数据

get\_info import re import urllib2 import json import pandas as pd

﹏ヽ暗。殇╰゛Y/ 2022年06月07日 02:53/ 0 赞/ 206 阅读

相关 vue笔记-----简单的vue-resource动态获取数据

用vue模拟百度搜索，一部分代码 <script src="./vue-1.0.28.js"></script> <script src="./js/vue-reso

古城微笑少年丶/ 2022年06月02日 03:07/ 0 赞/ 99 阅读

相关 Vue + ElementUI实现动态获取表格数据并分页

首先，引用必需的js和css文件，这里我已经下载到本地了，你们改成自己的地址就行。  <link rel="stylesheet"

雨点打透心脏的1/2处/ 2022年03月17日 05:56/ 0 赞/ 1233 阅读

相关 vue-element-template图表动态数据获取渲染页面

首先按照官方文档提供的例子先走一遍，成功显示之后就开始在原基础上去修改代码，来达到异步加载的效果；官方文档的链接：[https://echarts.baidu.com/tu

清疚/ 2022年03月14日 14:30/ 0 赞/ 291 阅读

相关 Vue2.5 学习笔记 9.6 使用Ajax获取动态数据

1. 获取AJAX数据模拟后端传过来的JSON ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

怼烎@/ 2022年02月21日 04:21/ 0 赞/ 217 阅读

相关动态规划及简单题目（笔记）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰半橙微兮°/ 2022年02月09日 08:21/ 0 赞/ 236 阅读

相关微信小程序怎么获取动态创建的表单数据？VUE怎么获取动态创建的表单数据

业务场景：一串一组表单在微信小程序中由后端获取的json数据循环遍历生成的，我们填好表单后要给后端在传回去。 ![watermark_type_ZmFuZ3poZW5naGV

Dear 丶/ 2022年01月31日 15:29/ 0 赞/ 1077 阅读

相关 vue处理动态表格的数据

场景手机屏幕较小，要展示的表身体的字段太多，但是有很多又是无用数据。那我们就用表头的数量，来匹配表身体字段。匹配到就展示，匹配不到就不展示原始数据格式

亦凉/ 2021年08月29日 17:42/ 0 赞/ 393 阅读