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

古城微笑少年丶 2022-06-02 03:07 106阅读 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 条评论，106人围观）

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

相关阅读

相关 vue集成echarts柱状图动态获取数据展示

引言在后台管理界面中有图表展示的需求，经过查阅资料，发现echarts较为合适，故使用vue+echarts进行开发图表效果代码环境 `全局引入echart`

秒速五厘米/ 2023年09月23日 18:10/ 0 赞/ 141 阅读

相关 Vue||获取网络数据

背景本次项目说白了就是利用vue向天行数据网异步发送请求，并获得将其返回的数据。所以，在进行项目之前，需要先去天行数据的官网注册登录并申请接口。（网址：https

刺骨的言语ヽ痛彻心扉/ 2023年03月14日 05:55/ 0 赞/ 23 阅读

相关用vue和swiper实现动态数据的简单轮播

做个轮播碰到了不少坑，记录一下。这里主要是在html的基础上用vue实现轮播功能 CDN 首先在lib文件夹上存放会用到的脚本，并在index文件中导入。由于图片

古城微笑少年丶/ 2023年03月03日 06:22/ 0 赞/ 4 阅读

相关 echarts ajax 动态获取数据

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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