Element UI极简教程(4):Select、Switch组件的使用
Java大联盟
致力于最高效的Java学习
关注
B 站搜索:楠哥教你学Java
获取更多优质视频教程
Select 下拉框
Element UI 的 Select 直接使用 el-select / el-option 标签即可,属性 v-model 表示该下拉框绑定的对象,即最终选择的值会赋给该对象,直接用于 el-select 标签,el-option 标签直接用来遍历可选数据,然后做展示,其中 label 属性为选项展示的文本信息,value 为该选项的值,代码如下所示:
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":label="item.label":value="item.value"></el-option></el-select>
</template><script>
export default {data(){{options: [{value: '1',label: '手机'}, {value: '2',label: '电脑'}, {value: '3',label: '电视'}],value: ''}}
}
</script>
效果图:
Select 的默认值跟 value 进行绑定,此时的 value = '',所以没有默认值,而当我们设置 value = '2' 时,效果如下所示:
如果要禁用某个下拉选项的话,只需要给数据添加 disabled = true 即可,代码如下所示:
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":label="item.label":value="item.value":disabled="item.disabled"></el-option></el-select>
</template><script>
export default {data(){return{options: [{value: '1',label: '手机'}, {value: '2',label: '电脑'}, {value: '3',label: '电视',disabled: true}],value: ''}}
}
</script>
效果图:
Select 常用的事件为 change,即更改下拉框选项的时候,会触发该方法,代码如下:
<template><el-select v-model="val" placeholder="请选择" @change="change"><el-optionv-for="item in options":label="item.label":value="item.value":disabled="item.disabled"></el-option></el-select>
</template><script>
export default {data(){return{options: [{value: '1',label: '手机'}, {value: '2',label: '电脑'}, {value: '3',label: '电视',disabled: true}],val: ''}},methods:{change(){console.log('当前选择的是:'+this.val)}}
}
</script>
效果图:
Switch 开关
Switch 组件表示两种相互对立的状态间的切换,多用于触发「开/关」,使用 el-switch 标签即可,绑定 v-model 到一个 Boolean 类型的变量,分别表示开/关,可以使用 active-color 属性与 inactive-color 属性来设置开关的背景色,代码如下所示:
<template><el-switchv-model="value"active-color="#13ce66"inactive-color="#ff4949"></el-switch>
</template><script>
export default {data(){return {value: true}}
}
</script>
效果图:
还可以使用 active-text 属性与 inactive-text 属性来设置开关的文字描述,active-text 表示开启的文字描述,inactive-text 表示关闭的文字描述,代码如下所示:
<template><el-switchstyle="display: block"v-model="value"active-color="#13ce66"inactive-color="#ff4949"active-text="上架"inactive-text="下架"></el-switch>
</template><script>
export default {data(){return {value: true}}
}
</script>
效果图:
Switch 常用的事件为 change,即点击开关的时候,会触发该方法,代码如下:
<template><el-switchstyle="display: block"v-model="val"active-color="#13ce66"inactive-color="#ff4949"active-text="上架"inactive-text="下架"@change="change"></el-switch>
</template><script>
export default {data(){return {val: true}},methods:{change(){console.log('当前开关的状态:'+this.val)}}
}
</script>
效果图:
以上就是 Element UI 中 Select、Switch 组件的使用,下一篇教程楠哥将继续带领大家学习 Element UI 其他组件的使用,如果你觉得这篇教程对你有帮助,就帮楠哥点个赞吧,我们下期教程再见。推荐阅读
1、Spring Boot+Vue项目实战
2、B站:4小时上手MyBatis Plus
3、一文搞懂前后端分离
4、快速上手Spring Boot+Vue前后端分离
楠哥简介
资深 Java 工程师,微信号 southwindss
《Java零基础实战》一书作者
腾讯课程官方 Java 面试官,今日头条认证大V
GitChat认证作者,B站认证UP主(楠哥教你学Java)
致力于帮助万千 Java 学习者持续成长。有收获,就点个在看
Element UI极简教程(4):Select、Switch组件的使用相关推荐
- Element UI极简教程(1):Element UI的安装
Java大联盟 致力于最高效的Java学习 关注 B 站搜索:楠哥教你学Java 获取更多优质视频教程 Element UI 简介 Element UI 是一套基于 Vue 的桌面端组件库,封装好 ...
- ES6 极简教程(ES6 Tutorial) 文 / 东海陈光剑
ES6 极简教程(ES6 Tutorial) 文 / 东海陈光剑 ECMAScript简介 JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化 ...
- 《Kotin 极简教程》第9章 轻量级线程:协程(2)
<Kotlin极简教程>正式上架: 点击这里 > 去京东商城购买阅读 点击这里 > 去天猫商城购买阅读 非常感谢您亲爱的读者,大家请多支持!!!有任何问题,欢迎随时与我交流~ ...
- 《React极简教程》第一章 Hello,World!
react React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook ...
- 【一天一门编程语言】Go 语言程序设计极简教程
文章目录 Go 语言程序设计极简教程 Go 语言程序设计极简教程 第一章:Go 语言基础 1.1 Go 语言简介 1.2 Go 语言安装 1.2.1 下载安装包 1.2.2 安装 Go 语言 1.3 ...
- 【编程实践】Linux / UNIX Shell编程极简教程
不同于一般的介绍Linux Shell 的文章,本文并未花大篇幅去介绍 Shell 语法,而是以面向"对象" 的方式引入大量的实例介绍 Shell 日常操作,"对象&qu ...
- 高效sql性能优化极简教程
一,sql性能优化基础方法论 对于功能,我们可能知道必须改进什么:但对于性能问题,有时我们可能无从下手.其实,任何计算机应用系统最终队可以归结为: cpu消耗 内存使用 对磁盘,网络或其他I/O设备的 ...
- 《Kotlin 极简教程 》第5章 集合类
<Kotlin 极简教程 >第5章 集合类 <Kotlin极简教程>正式上架: 点击这里 > 去京东商城购买阅读 点击这里 > 去天猫商城购买阅读 非常感谢您亲爱的 ...
- 《Kotin 极简教程》第13章 使用 Kotlin 和 Anko 的Android 开发
第13章 使用 Kotlin 和 Anko 的Android 开发 最新上架!!!< Kotlin极简教程> 陈光剑 (机械工业出版社) 可直接打开京东,淘宝,当当===> 搜索: ...
最新文章
- 一、MySql优化的基础介绍
- 【CoppeliaSim】远程 API 之 Matlab 控制,对比 V-rep 有些不同
- auto_ptr使用介绍
- centos java服务器搭建_从零开始搭建CentOS 7服务器配置JavaWeb环境
- next数组_【阿里面试热身题】数组去重(动画展示)
- 自定义异常最佳实践_播放,自定义和组织媒体的最佳文章
- 方差分析中的“元”和“因素”是什么?
- 12 SD配置-企业结构-分配-给销售范围分配销售办公室
- CSS 与 HTML5 响应式图片
- python-格化输出format方法
- OSChina 周二乱弹 —— 高手应该习惯寂寞
- MyEclipse使用总结——在MyEclipse中新建Maven框架的web项目[转]
- DOS命令:color
- 顺序表的十个基本操作(全)
- OPENGL和DX的不同.
- Linux 查看日志文件命令(整合)
- 数据分析(经典泰坦尼克号竞赛入门题)
- alter在MySQL中是什么意思_MySql中要AlterTable的同学请注意!!!_MySQL
- domian index域索引和全文索引
- 安装系统之三 U盘启动盘建立磁盘分区教程