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 相关文章推荐
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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
html中select语句读取mysql表中内容
2006/10/09 PHP
php生成动态验证码gif图片
2015/10/19 PHP
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
javascript判断office版本示例
2014/04/11 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
基于python 字符编码的理解
2017/09/02 Python
使用Python写一个小游戏
2018/04/02 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
安全标准化汇报材料
2014/02/03 职场文书
《我的信念》教学反思
2014/02/15 职场文书
《春雨》教学反思
2014/04/24 职场文书
小学综合实践活动总结
2014/07/07 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年企业新年寄语
2014/12/08 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python