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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 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
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
详解python中的 is 操作符
2017/12/26 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
Shell编程面试题
2016/05/29 面试题
大四自我鉴定范文
2013/10/06 职场文书
架构师岗位职责
2013/11/18 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
给领导的检讨书
2014/02/16 职场文书
服装采购员岗位职责
2014/03/15 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
小学生优秀评语大全
2014/04/22 职场文书
党支部对照检查材料
2014/08/25 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
捐款通知怎么写
2015/04/24 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
HDFS免重启挂载新磁盘
2022/04/06 Servers
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL