vue实现的下拉框功能示例


Posted in Javascript onJanuary 29, 2019

本文实例讲述了vue实现的下拉框功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue下拉框</title>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
  <select v-model="one">
    <option v-for="x in shuju">{{x.name}}{{x.famname}}</option>
  </select><br>
  <div>
    <span>{{one}}</span><br>
    <span>{{oneF}}</span><br>
    <span>{{oneL}}</span>
  </div>
</div>
<script>
  let rua=new Vue({
    el:"#app",
    data:{
      shuju:[
        {name:"孙",famname:"悟空"},
        {name:"猪",famname:"八戒"},
        {name:"沙",famname:"悟净"}
      ],
      one:""
    },
    computed:{
      oneF(){
        return this.one.charAt(0);
      },
      oneL(){
        return this.one.slice(1,3);
      }
    }
  });
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

vue实现的下拉框功能示例

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

Javascript 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
node中的密码安全(加密)
Sep 17 Javascript
angular4中引入echarts的方法示例
Jan 29 #Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 #Javascript
微信小程序实现页面浮动导航
Jan 28 #Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 #Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 #Javascript
微信小程序实现顶部导航特效
Jan 28 #Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 #Javascript
You might like
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
python3连接MySQL数据库实例详解
2018/05/24 Python
带你认识Django
2019/01/15 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
pandas的qcut()方法详解
2019/07/06 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
人事专员的岗位职责
2014/03/01 职场文书
小学母亲节活动方案
2014/03/14 职场文书
初中班主任寄语
2014/04/04 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
中学生打架检讨书
2014/10/13 职场文书
作风建设年度心得体会
2014/10/29 职场文书
中国合伙人观后感
2015/06/02 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis