Select、Switch组件的使用
select 下拉框
element ui 的 select 直接使用 el-select / el-option 标签即可，属性 v-model 表示该下拉框绑定的对象，即最终选择的值会赋给该对象，直接用于 el-select 标签，el-option 标签直接用来遍历可选数据，然后做展示，其中 label 属性为选项展示的文本信息，value 为该选项的值，代码如下所示：
export default { data(){ { options: [{ value: '1', label: '手机' }, { value: '2', label: '电脑' }, { value: '3', label: '电视' }], value: '' } }}效果图：
select 的默认值跟 value 进行绑定，此时的 value = ''，所以没有默认值，而当我们设置 value = '2' 时，效果如下所示：
如果要禁用某个下拉选项的话，只需要给数据添加 disabled = true 即可，代码如下所示：
export default { data(){ return{ options: [{ value: '1', label: '手机' }, { value: '2', label: '电脑' }, { value: '3', label: '电视', disabled: true }], value: '' } }}效果图：
select 常用的事件为 change，即更改下拉框选项的时候，会触发该方法，代码如下：
export default { data(){ return{ options: [{ value: '1', label: '手机' }, { value: '2', label: '电脑' }, { value: '3', label: '电视', disabled: true }], val: '' } }, methods:{ change(){ console.log('当前选择的是：'+this.val) } }}效果图：
switch 开关
switch 组件表示两种相互对立的状态间的切换，多用于触发「开/关」，使用 el-switch 标签即可，绑定 v-model 到一个 boolean 类型的变量，分别表示开/关，可以使用 active-color 属性与 inactive-color 属性来设置开关的背景色，代码如下所示：
export default { data(){ return { value: true } }}效果图：
还可以使用 active-text 属性与 inactive-text 属性来设置开关的文字描述，active-text 表示开启的文字描述，inactive-text 表示关闭的文字描述，代码如下所示：
export default { data(){ return { value: true } }}效果图：
switch 常用的事件为 change，即点击开关的时候，会触发该方法，代码如下：
export default { data(){ return { val: true } }, methods:{ change(){ console.log('当前开关的状态：'+this.val) } }}效果图：
以上就是 element ui 中 select、switch 组件的使用，下一篇教程楠哥将继续带领大家学习 element ui 其他组件的使用，如果你觉得这篇教程对你有帮助，就帮楠哥点个赞吧，我们下期教程再见。
linux重启网络服务
如何选择更适合自己的云OA？
2月14号红米note4x发布会，小米5c和小米6会同步登场吗？
对于手机的性价比来说，骁龙870是一个不错的选择
MS4989：64 微细分步进电机驱动器
Select、Switch组件的使用
STM32大小端序与堆栈及其增长方向分析
曾经的魅族科技三剑客，曾经的手机巨头怎么了？
照明型EPS应急电源应用及选择常识
传感领域最新产品曝光
国内深耕三十年,甲骨文缘何裁撤中国研发中心?
TDK双电层电容器的原理、特点及种类
用于高可靠性应用的PME和BME MLCC之对比
国产FPGA芯片崛起 京微雅格FPGA研发重新起航
2019年全球的芯片元器件销售额同比减少15％
大型电力变压器绝缘事故的分析与预防
智能网联作为一项颠覆性的技术 正在不断重塑整个汽车产业的生态
全屋智能化核心黑科技，智能镜面显示器亮相
E拆解：荣耀Play4T拆机来看华为国产化的又一大进步
高效、可靠、稳定——ERS1111A 超高压线性 LDO 芯片
element ui 的 select 直接使用 el-select / el-option 标签即可，属性 v-model 表示该下拉框绑定的对象，即最终选择的值会赋给该对象，直接用于 el-select 标签，el-option 标签直接用来遍历可选数据，然后做展示，其中 label 属性为选项展示的文本信息，value 为该选项的值，代码如下所示：
export default { data(){ { options: [{ value: '1', label: '手机' }, { value: '2', label: '电脑' }, { value: '3', label: '电视' }], value: '' } }}效果图：
select 的默认值跟 value 进行绑定，此时的 value = ''，所以没有默认值，而当我们设置 value = '2' 时，效果如下所示：
如果要禁用某个下拉选项的话，只需要给数据添加 disabled = true 即可，代码如下所示：
export default { data(){ return{ options: [{ value: '1', label: '手机' }, { value: '2', label: '电脑' }, { value: '3', label: '电视', disabled: true }], value: '' } }}效果图：
select 常用的事件为 change，即更改下拉框选项的时候，会触发该方法，代码如下：
export default { data(){ return{ options: [{ value: '1', label: '手机' }, { value: '2', label: '电脑' }, { value: '3', label: '电视', disabled: true }], val: '' } }, methods:{ change(){ console.log('当前选择的是：'+this.val) } }}效果图：
switch 开关
switch 组件表示两种相互对立的状态间的切换，多用于触发「开/关」，使用 el-switch 标签即可，绑定 v-model 到一个 boolean 类型的变量，分别表示开/关，可以使用 active-color 属性与 inactive-color 属性来设置开关的背景色，代码如下所示：
export default { data(){ return { value: true } }}效果图：
还可以使用 active-text 属性与 inactive-text 属性来设置开关的文字描述，active-text 表示开启的文字描述，inactive-text 表示关闭的文字描述，代码如下所示：
export default { data(){ return { value: true } }}效果图：
switch 常用的事件为 change，即点击开关的时候，会触发该方法，代码如下：
export default { data(){ return { val: true } }, methods:{ change(){ console.log('当前开关的状态：'+this.val) } }}效果图：
以上就是 element ui 中 select、switch 组件的使用，下一篇教程楠哥将继续带领大家学习 element ui 其他组件的使用，如果你觉得这篇教程对你有帮助，就帮楠哥点个赞吧，我们下期教程再见。
linux重启网络服务
如何选择更适合自己的云OA？
2月14号红米note4x发布会，小米5c和小米6会同步登场吗？
对于手机的性价比来说，骁龙870是一个不错的选择
MS4989：64 微细分步进电机驱动器
Select、Switch组件的使用
STM32大小端序与堆栈及其增长方向分析
曾经的魅族科技三剑客，曾经的手机巨头怎么了？
照明型EPS应急电源应用及选择常识
传感领域最新产品曝光
国内深耕三十年,甲骨文缘何裁撤中国研发中心?
TDK双电层电容器的原理、特点及种类
用于高可靠性应用的PME和BME MLCC之对比
国产FPGA芯片崛起 京微雅格FPGA研发重新起航
2019年全球的芯片元器件销售额同比减少15％
大型电力变压器绝缘事故的分析与预防
智能网联作为一项颠覆性的技术 正在不断重塑整个汽车产业的生态
全屋智能化核心黑科技，智能镜面显示器亮相
E拆解：荣耀Play4T拆机来看华为国产化的又一大进步
高效、可靠、稳定——ERS1111A 超高压线性 LDO 芯片