您现在的位置是:首页 > Javascript
当前栏目
Element UI极简教程(4):Select、Switch组件的使用
2023-04-18 16:19:31 时间
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-option
v-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-option
v-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-option
v-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-switch
v-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-switch
style="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-switch
style="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>
效果图:
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营