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

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

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

相关阅读

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

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

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

相关 SpringBoot 实时动态的获取配置数据

1、现在项目新建config文件，再在里面建立文件。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

叁歲伎倆/ 2023年08月17日 17:21/ 0 赞/ 7 阅读

相关 echarts ajax 动态获取数据

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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