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 相关文章推荐
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
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
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python变量不能以数字打头详解
2016/07/06 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python实现简单http服务器
2018/04/12 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python线程中的同步问题及解决方法
2019/08/29 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
应急处置方案
2014/06/16 职场文书
2015年库房工作总结
2015/04/30 职场文书
党员转正申请报告
2015/05/15 职场文书
python如何正确使用yield
2021/05/21 Python