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图片实时加载提供网页打开速度
Sep 11 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
Node.js安装配置图文教程
May 10 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
关于js类的定义
2011/06/28 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
jquery轮播图插件使用方法详解
2020/07/31 jQuery
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Python Json数据文件操作原理解析
2020/05/09 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
python反扒机制的5种解决方法
2021/02/06 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
安全标准化汇报材料
2014/02/03 职场文书
测量工程专业求职信
2014/02/24 职场文书
《春晓》教学反思
2014/04/20 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
施工现场安全管理制度
2015/08/05 职场文书
SQL基础的查询语句
2021/11/11 MySQL