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对URL字符串进行编码/解码分析
Oct 25 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
javascript数组去重小结
Mar 07 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
node.js中的require使用详解
2014/12/15 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
vue实现计步器功能
2019/11/01 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python_LDA实现方法详解
2017/10/25 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python对html过滤处理的方法
2018/10/21 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python处理PDF与CDF实例
2020/02/26 Python
详解python内置模块urllib
2020/09/09 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
自我评价怎么写正确呢?
2013/12/02 职场文书
生日宴会答谢词
2014/01/09 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
工程催款通知书
2015/04/17 职场文书
大学升旗仪式主持词
2015/07/04 职场文书