专栏首页Kirin博客vue动态选择select

vue动态选择select

本文实例讲述了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.js程序设计有所帮助。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用Vue实现简易tab切换效果

    (1) 以上代码看起来似乎很简单容易懂,而且效果也能实现,但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值,因此我们有必要改进一下代...

    kirin
  • oracle 登录–报ora-01031的问题

    要开启os认证,首先需要确保你的netsql.ora文件开启了all 或者nts模式

    kirin
  • vue @import 路径问题

    //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)

    kirin
  • 上班族必备!这款小程序让你肩颈放松,逗你笑

    知晓君
  • 20190116-将特定数字插入一个已经

    分析:已经排好序的列表也可能是升序也可能是降序,需要先确定列表的排序方式以升序为例,需要考虑4主要种情况:

    py3study
  • 利用JQuery实现从底部回到顶部的功能

    今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的...

    林老师带你学编程
  • 最简单的混合开发教程资料汇总

    祈澈菇凉
  • 用心+用新,newifi新路由演绎品牌新公式

    11月23日,国务院印发的《关于积极发挥新消费引领作用加快培育形成新供给新动力的指导意见》提出培育壮大战略性新兴产业,大力发展服务业,强调支持智能家居等市场前景...

    曾响铃
  • Swift学习:构造器(下)

    本篇主要介绍Swift中构造器的一些特殊用法 一、可失败的构造器 顾名思义,这是用于我们构造过程可能失败情况的构造器。失败的原因可能是给构造器传入无效的参数值,...

    梧雨北辰
  • 同一细胞中转录组和染色质高通量测序联合分析

    每个人的时间精力有限,必须优先阅读相关文献,开设这个栏目也是希望为大家推荐高质量的单细胞相关文献。如果大家对单细胞转录组感兴趣可以关注一下,哪怕每天只学一点点,...

    生信技能树jimmy

扫码关注云+社区

领取腾讯云代金券