首页 > 其他分享 >vue同时获取select的id和value

vue同时获取select的id和value

时间:2022-10-11 23:55:35浏览次数:49  
标签:event vue title value id class select

<template>
  <div class="select1">
    <select v-model="selectClassEnd" @change="selectClass($event)">
      <option value="NONE">未选择</option>
      <option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
        {{ options.title }}
      </option>
    </select>
    <p>{{ select_class_id }}---{{ select_class_title }}</p>
  </div>
</template>

<script>
export default {
  name: 'selectClass',
  data() {
    return {
      selectClassData: [ // 类别选择数据或者从后台获取数据
        {id: 1, title: '科普类'},
        {id: 2, title: '亲子类'},
        {id: 3, title: '制作类'},
        {id: 4, title: '创意类'}
      ],
      selectClassEnd: 'NONE', // 类别默认选择
      select_class_id: '',
      select_class_title: ''
    }
  },
  methods: {
    // 类别选中
    selectClass(event) {
      this.select_class_id = event.target.value
      this.select_class_title = event.target.options[event.target.selectedIndex].text
    }
  }

}
</script>

<style scoped>
</style>

标签:event,vue,title,value,id,class,select
From: https://www.cnblogs.com/srczhang/p/15737796.html

相关文章

  • [Android开发学iOS系列] ViewController
    iOSViewController写UIKit的代码,ViewController是离不开的.本文试图讲讲它的基本知识,不是很深入且有点杂乱,供初级选手和跨技术栈同学参考.WhatisaViewContro......
  • vue中自己编写一个loader
    以一个解析pdf的loader为例首先在vue.config.js添加rule解析规则,1、test表示要解析的文件类型为pdf文件。2、use表示要使用的loader的位置,如果是通过npm安装的loader插......
  • 开源,跨平台免费C++ IDE ---Code::Block
     CodeBlock是一个免费,开源的C++IDE,它看上去有一个一致的外观,满足用户的需要,具有扩展性和可配置性。这个IDE有你需要的所有功能,并且它是跨平台的。另外,其具有插件框架......
  • IDEA MyEclipse Eclipse 快捷键大全(最终版)
    IDEAMyEclipseEclipse快捷键大全(最终版)IDEAMyEclipseEclipse快捷键大全​​IDEAMyEclipseEclipse快捷键大全(最终版)​​​​IDEA篇​​​​MyEclipse常用快捷键......
  • IDEA DEBUG 启动慢,启动卡死,本地IDEA环境,千万千万不要在方法上打断点!太坑了!
    本地IDEA环境,千万千万不要在方法上打断点!太坑了!文章目录​​本地IDEA环境,千万千万不要在方法上打断点!太坑了!​​​​**到底为什么**​​​​**意外收获**​​​​结语​​上......
  • 【精品】vue3中setup语法糖下通用的分页插件
    注意:本博客理论基础:https://blog.51cto.com/lianghecai/5743179效果自定义分页插件:PagePlugin.vue<scriptsetuplang="ts">//total:用来传递数据总条数//pageSize......
  • android的双亲委派模型
    javaJVM中有三个初始的类加载器:引导类加载器BootStrapClassLoader,扩展类加载器ExterntionsClassLoader,应用程序类加载器ApplicationClassLoader。引导类加载器BootStrap......
  • IDEA 2020 右键没有Servlet选项 解决办法
    在配置好了Tomcat依赖后,本来是可以创建Servlet的,但是第二天打开就会没有Servlet选项解决方法1、选中项目file-projectstructure-modules2、选中src标记为resources......
  • DenseCLIP Language-Guided Dense Prediction with Context-Aware Prompting论文阅读
    摘要作者首先回顾CLIP,说道使用图像-文本对进行大规模预训练得到的模型可以很容易迁移到下游任务。然后指出目前还没有人做过将从图像-文本对学到的知识应用于密集预测任务......
  • 群论 polya burnside
    ​​http://www.elijahqi.win/archives/3388​​群论什么是群?元素和建立在元素上的二元运算构成的代数系统如何判定是否是一个群?要求满足四条群公理阶G中所含元素的......