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 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
js创建数组的简单方法
2016/07/27 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
js回调函数仿360开机
2019/12/26 Javascript
python编程羊车门问题代码示例
2017/10/25 Python
python如何制作英文字典
2019/06/25 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
《满井游记》教学反思
2014/02/26 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
安全学习心得体会范文
2016/01/18 职场文书