数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

河北2o选5开奖结果:vue实现百度下拉列表交互操作示例

来源:脚本之家  责任编辑:小易  

河北20选五开奖结果 www.vhmyd.cn 本文实例讲述了vue实现百度下拉列表交互操作。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>河北20选五开奖结果 www.vhmyd.cn vue百度下拉列表</title>
  <style>
    .gray{
      background: #ccc;
    }
  </style>
  <script src="vue.js"></script>
  <script src="vue-resource.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'body',
        data:{
          myData:[],
          t1:'',
          now:-1//按上下键,当前选中
        },
        methods:{
          get:function(ev){
            if(ev.keyCode==38 || ev.keyCode==40)return;
            if(ev.keyCode==13){
              window.open('https://www.baidu.com/s?wd='+this.t1);
              this.t1='';
            }
            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
              wd:this.t1
            },{
              jsonp:'cb'
            }).then(function(res){
              this.myData=res.data.s;
            },function(){
            });
          },
          changeDown:function(){
            this.now++;
            if(this.now==this.myData.length)this.now=-1//走到最下面那个,就返回最上面那个;
            this.t1=this.myData[this.now];//搜索框的值对应变化
          },
          changeUp:function(){
            this.now--;
            if(this.now==-2)this.now=this.myData.length-1;
            this.t1=this.myData[this.now];
          }
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
    <!--搜索框的光标会默认定位到文字前面,这里@keydown.up.prevent阻止默认事件-->
    <ul>
      <li v-for="value in myData" :class="{gray:$index==now}">
        {{value}}
      </li>
    </ul>
    <p v-show="myData.length==0">暂无数据...</p>
  </div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具//tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:


  • 本文相关:
  • vue 1.x 交互实现仿百度下拉列表示例
  • vue基础之使用get、post、jsonp实现交互功能示例
  • vuejs组件之间通过props交互及验证的方式
  • vue中axios处理http发送请求的示例(post和get)
  • vue resource中的get与post请求的实例代码
  • vue 2.x 中axios 封装的get 和post方法
  • vue axios数据请求get、post方法及实例详解
  • vue中axios的封装问题(简易版拦截,get,post)
  • vuejs使用axios异步访问时用get和post的实例讲解
  • vue axios全局拦截 get请求、post请求、配置请求的实例代码
  • vue组件实践之可搜索下拉框功能
  • 详解基于vue的服务端渲染框架nuxt
  • 浅谈vue方法内的方法使用this的问题
  • vue实现图书管理demo详解
  • 详解vue-cli 3.0 build包太大导致首屏过长的解决方案
  • vue from-validate 表单验证的示例代码
  • vue 中动态绑定class 和 style的方法代码详解
  • 详解vue.js自定义tiponce指令用法实例
  • 解决ie11 vue +webpack 项目中数据更新后页面没有刷新的问题
  • 详解用webpack2.0构建vue2.0超详细精简版
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 河北20选五开奖结果 - 频道导航
    Copyright © 2017 河北20选五开奖结果 www.vhmyd.cn All Rights Reserved
  • 王一彪:为新时代“双一流”建设提供舆论支持 2019-03-20
  • 傅抱石《琵琶行诗意》1.035亿元成交 2019-03-19
  • 国地税怎么又合并了呢 一般来看 这是种集中资源的举动 2019-03-19
  • 中考期间 太原27个公共自行车服务点有人值守 2019-03-18
  • 美媒:美国“伪专家”太多,妨碍美对华关系 2019-03-18
  • “公路挤成步行街”端午假期超944万人次打卡“网红”重庆 2019-03-18
  • 中国经济稳步迈向高质量 2019-03-17
  • 阳泉发现一枚疑似炮弹 警方迅速处置 2019-03-17
  • 临汾市公开曝光5起违反中央八项规定精神问题 2019-03-17
  • 那你说说看,哪个国家什么时候是由劳动者主导的?[哈哈] 2019-03-16
  • 云南:玉溪市红塔区率先推行“互联网+政务服务”新模式 2019-03-16
  • 就因为“阶级亲”,才应把这些难民送到欧洲。欧洲生活水平高呀,让亲人生活的更好。不能让他们到中国受苦受难呀。 2019-03-16
  • 韩国提高最低工资再起争议 负面影响引发争论 2019-03-15
  • 十年长出一座绿色新城(在习近平新时代中国特色社会主义思想指引下——新时代新作为新篇章) 2019-03-15
  • 暖心!宝宝看餐厅海报  有爱餐厅送上美食 2019-03-15
  • 144| 214| 210| 416| 872| 723| 646| 354| 481| 953|