vue中动态select的使用方法示例


Posted in Javascript onOctober 28, 2019

本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考,具体如下:

html代码如下:

通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容

<template>
  <div class="violationsList">
    <div class="type-select">
      <select name="selected" id="" v-model="selected" @change="getTypeSelected">
        <option :value="types.id" v-for="types in typeList" >{{types.name}}</option> 
      </select>
    </div>
  </div>
</template>

js中写如:

<script>
export default {
  data(){
    return{
      typeList:[
        {id:1,name:'违规类型'},
        {id:2,name:'无人值守'},
        {id:3,name:'蒙头睡觉'},
      ],
      selected:''
    }
  },
  created(){


 //如果没有这句代码,select中初始化会是空白的,默认选中就无法实现
    this.selected = this.typeList[0].id;
  },
  methods:{
    getTypeSelected(){
      //获取选中的违规类型
      console.log(this.selected)
    }
  }
}
</script>

vue中动态select的使用方法示例

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

Javascript 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
js实现坦克移动小游戏
Oct 28 #Javascript
vue 实现走马灯效果
Oct 28 #Javascript
JS实现json数组排序操作实例分析
Oct 28 #Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 #Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 #Javascript
vue 实现input表单元素的disabled示例
Oct 28 #Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
微信小程序日历效果
2018/12/29 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
利用Python获取操作系统信息实例
2016/09/02 Python
python用插值法绘制平滑曲线
2021/02/19 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python中dict使用方法详解
2019/07/17 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
局域网标准
2016/09/10 面试题
逃课上网检讨书
2014/02/20 职场文书
委托书怎么写
2014/07/31 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技