首页 > 其他分享 >VUE-select-option 获取 label value 值

VUE-select-option 获取 label value 值

时间:2023-03-10 13:14:15浏览次数:54  
标签:类产品 VUE option 获取 value label item data

1. 绑定的value值中 多赋值一个参数

:value="{ value: item.value, label: item.label}"

2.添加@change 事件进行获取值

<template>
<el-select v-model="value" placeholder="请选择" @change="selectProductType">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="{ value: item.value, label: item.label}">
</el-option>
</el-select>
</template>

<script>
export default {
data() {
return {
options: [{
value: '101',
label: '接入类产品'
}, {
value: '102',
label: '功能类产品'
}, {
value: '103',
label: '内容类产品'
}, {
value: '104',
label: '资源类产品'
}, {
value: '105',
label: '服务类产品'
}],
value: '',
label: ''
}
},
methods: {

获取value label 值得方法
selectProductType(data){
// 将data对象解构
const { value, label } = data;
this.label = label;
this.value = value;
}
}
}
</script>

标签:类产品,VUE,option,获取,value,label,item,data
From: https://www.cnblogs.com/Cold666666Assassin/p/17203000.html

相关文章

  • vue3 二次封装element-plus的弹框el-dialog,增加了最小化、弹出位置 title字体色、hea
    一、利用一个小时简单二次封装了element-plus的弹框el-dialog,根据项目需求主要增加了最小化、最小化icon、弹出位置、title字体色、header背景色、关闭图标色。 代码如......
  • vue部署在Apache上 刷新404问题
    //在项目根目录下新建.htaccess文件<IfModulemod_rewrite.c>RewriteEngineOnRewriteBase/RewriteRule^index\.html$-[L]RewriteCond%{REQUEST_......
  • BIOS界面中Boot Option Priorities选项无法进入的问题
    在bios界面,通过方向键进入[secure]菜单,通过方向键选择[SecureBootControl/menu]选项,将SecureBootControl设定为“Disabled”通过方向键进入[boot]菜单,通过方向键选择[L......
  • 001. vue+element实现弹窗拖拽效果
    一、创建一个js文件因为本身dialog窗口不具备移动拖拽能力,所以需要以下方法去实现,在src/components同级文件下创建utils文件夹,然后创建名为 directives.js 的文件。dir......
  • jquery中的attr函数attr(name)、attr(key,value)、attr(properties)、attr(key,fn)、r
    ​​​​全栈工程师开发手册(作者:栾鹏)​​jquery系列教程2-style样式操作全解​​jquery通过attr函数操作元素属性jquery的attr函数,包括attr(name)、attr(key,value)、a......
  • 重读vue电商网站49之第三方库使用CDN
    通过externals加载外部CDN资源默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。 例如上述chu......
  • Vue 使用插件 Plugin,管理静态常量
    Vue常量使用第一种方法单独定义一个constant.js,内容如下://大屏卡片标题exportconstBIG_SCREEN_CARD_TITLE={memberCount:'注册人员数',todayCou......
  • vue2和vue3
    双向绑定更新vue2的双向数据绑定是利⽤ES5的⼀个API,Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。vue3中使⽤了ES6的ProxyAPI对......
  • vue3中 defineComponent
    在这个例子中,父组件引用了MyComponent组件,并通过props传递了一个字符串作为message属性的值。在MyComponent组件中,我们可以通过props参数来获取这个值,并在se......
  • echart 解决setOption线残留
    前言:Antd+echarts我想要实现的是点击表的某一行自动生成对应的折线图,我在点击第一行生成5条线,我在点击第二行的时候,本该生成2条线,结果还是5条线;最开始我以为......