elementUI select,option变化,如果option不存在上次的选项,自动清空上次的选择

 select,option变化,如果option不存在上次的选项,自动清空上次的选择

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in arr":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-button @click="fun">fun</el-button><el-button @click="fun2">fun2</el-button><el-button @click="fun3">fun3</el-button><el-button @click="fun4">fun4</el-button>
</template>
</div>var Main = {data() {return {arr:[],options: [{value: '黄金糕',label: '黄金糕'}, {value: '双皮奶',label: '双皮奶'}, {value: '蚵仔煎',label: '蚵仔煎'}],options2: [{value: '黄金糕2',label: '黄金糕2'}, {value: '双皮奶2',label: '双皮奶2'}, {value: '蚵仔煎2',label: '蚵仔煎2'} ,{value: '蚵仔煎',label: '蚵仔煎'}],value: ''//}},methods:{fun(){this.arr= this.options},fun2(){this.arr=this.options2},fun3(){ this.arr=[]},fun4(){ alert(this.value)}},watch:{arr(val){let data=val.find(i=>i.value==this.value)if(!data)this.value=''}}}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot中Maven的定义及国内源配置教程,实现自动获取Jar包

推荐一个国内镜像API网站&#xff0c;无需信用卡及科学上网即可调用gpt&#xff0c;claude3&#xff0c;gemini等国外模型&#xff0c;感兴趣的可以看下&#x1f449;&#xff1a;https://api.atalk-ai.com/ SpringBoot中Maven的定义及国内源配置教程&#xff0c;实现自动获取J…

使用微信小程序调用飞桨PaddleX平台自行训练的模型——微信小程序用训练的牡丹花模型Demo测试

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

【C++】基础篇二、引用详解

文章目录 1.引用的概念和定义2.引用的特性3.引用的使用3.1 做函数返回值3.2 传参 3.3 其他使用 4.const的运用引用的权限问题&#xff1b;const修饰引用&#xff1b; 5.指针和引用的对比 1.引用的概念和定义 在介绍概念之前先说一下引用的符号——“ & ”&#xff1b;对于这…

D3基础:绘制圆形、椭圆形、多边形、线、路径、矩形

在D3.js中&#xff0c;可以通过SVG元素来创建各种几何图形。以下是D3.js中常用的几何图形及其简单的创建方法&#xff1a; 1. 圆形 (Circle) 圆形是最基本的形状之一&#xff0c;可以通过<circle>标签来创建。 <!DOCTYPE html> <html> <head><met…

前端监控之sourcemap精准定位和还原错误源码

一、概述 在前端开发中&#xff0c;监控和错误追踪是确保应用稳定性和用户体验的重要环节。 随着前端应用的复杂性增加&#xff0c;JavaScript错误监控变得尤为重要。在生产环境中&#xff0c;为了优化加载速度和性能&#xff0c;前端代码通常会被压缩和混淆。这虽然提升了性…

MySQL的表的约束以及查询

本篇文章继续给大家梳理MySQL的操作 目录 表的约束 空属性 默认值 列描述 0填充 主键 主键常识 添加主键 删除主键 复合主键 自增长 唯一键 外键 单/多行输入与全/指定列的插入 全列输入 单行输入 多行插入 指定列插入 单行输入 多行插入 插入否则更新 替换…

MySQL 日志 主从复制

1. 日志 学习链接&#xff0c;click mysql中有4种日志&#xff1a; 错误日志二进制日志查询日志慢查询日志 1.1 错误日志 错误日志是MySQL中最重要的日志之一&#xff0c;它记录了当mysqld启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息。当…

自动驾驶系列—深入解析自动驾驶车联网技术及其应用场景

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

基于YOLOv8深度学习的公共卫生防护口罩佩戴检测系统(PyQt5界面+数据集+训练代码)

在全球公共卫生事件频发的背景下&#xff0c;防护口罩佩戴检测成为保障公众健康和控制病毒传播的重要手段之一。特别是在人员密集的公共场所&#xff0c;例如医院、学校、公共交通工具等地&#xff0c;口罩的正确佩戴对降低病毒传播风险、保护易感人群、遏制疫情扩散有着至关重…

vue使用List.reduce实现统计

需要对集合的某些元素的值进行计算时&#xff0c;可以在计算属性中使用forEach方法 1.语法&#xff1a;集合.reduce ( ( 定义阶段性累加后的结果 , 定义遍历的每一项 ) > 定义每一项求和逻辑执行后的返回结果 , 定义起始值 ) 2、简单使用场景&#xff1a;例如下面…

Ubuntu24.04安装和配置Redis7.4

Ubuntu24.04安装和配置Redis7.4 #切换到root用户 sudo su -#更新源 apt update apt upgrade#安装 lsb-release、curl 和 gpg &#xff0c;以便能够添加 Redis 仓库 apt install lsb-release curl gpg#导入 Redis 的 GPG 密钥 curl -fsSL https://packages.redis.io/gpg | gpg …

【Linux】进程的优先级

进程的优先级 一.概念二.修改优先级的方法三.进程切换的大致原理&#xff1a;四.上下文数据的保存位置&#xff1a; 一.概念 cpu资源分配的先后顺序&#xff0c;就是指进程的优先权&#xff08;priority&#xff09;。 优先权高的进程有优先执行权利。配置进程优先权对多任务环…

ESLint 使用教程(七):ESLint还能校验JSON文件内容?

系列文章 ESLint 使用教程&#xff08;一&#xff09;&#xff1a;从零配置 ESLint ESLint 使用教程&#xff08;二&#xff09;&#xff1a;一步步教你编写 Eslint 自定义规则 ESLint 使用教程&#xff08;三&#xff09;&#xff1a;12个ESLint 配置项功能与使用方式详解 ES…

【软件工程】一篇入门UML建模图(类图)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;软件开发必练内功_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前…

uniapp 跨域前端代理

manifest.json里找到H5&#xff0c;添加下面代码 请求封装里直接 url ‘/test’ 就可以 "devServer" : {"https" : false,"port" : 8080,"proxy" : {"/test" : {"target" : "http://192.168.5.20:8080&qu…

AWTK-WIDGET-WEB-VIEW 实现笔记 (3) - MacOS

MacOS 上实现 AWTK-WIDGET-WEB-VIEW 有点麻烦&#xff0c;主要原因是没有一个简单的办法将一个 WebView 嵌入到一个窗口中。所以&#xff0c;我们只能通过创建一个独立的窗口来实现。 1. 创建窗口 我对 Object-C 不熟悉&#xff0c;也不熟悉 Cocoa 框架&#xff0c;在 ChatGPT…

QT仿QQ聊天项目,第三节,实现聊天界面

一&#xff0c;界面控件示意图 界面主要由按钮QPushButton,标签QLabel,列表QListWidget 要注意的是QListWidget既是实现好友列表的控件&#xff0c;也是实现聊天气泡的控件 二&#xff0c;控件样式 QPushButton#btn_name {border:none;}QPushButton#btn_close {border:1px;bac…

微信小程序自定义顶部导航栏(适配各种机型)

效果图 1.pages.js&#xff0c;需要自定义导航栏的页面设置"navigationStyle": "custom" 2.App.vue,获取设备高度及胶囊位置 onLaunch: function () {// 系统信息const systemInfo uni.getSystemInfoSync()// 胶囊按钮位置信息const menuButtonInfo uni.…

7、硬盘品牌分类介绍:海力士 - 计算机硬件品牌系列文章

海力士&#xff0c;‌全称为SK海力士&#xff0c;‌是一家总部位于韩国的全球顶级半导体供应商&#xff0c;‌专注于动态随机存取存储器(‌DRAM)‌、‌NAND快闪存储器(‌NAND Flash)‌及CMOS图像传感器(‌CIS)‌等产品的研发、‌生产和销售。‌作为韩国第三大财阀SK集团旗下的子…

Android Studio开发学习(五)———LinearLayout(线性布局)

一、布局 认识了解一下Android中的布局&#xff0c;分别是: LinearLayout(线性布局)&#xff0c;RelativeLayout(相对布局)&#xff0c;TableLayout(表格布局)&#xff0c; FrameLayout(帧布局)&#xff0c;AbsoluteLayout(绝对布局)&#xff0c;GridLayout(网格布局) 等。 二、…