一文搞懂:关于VueElement组件el

简介: 一文搞懂:关于VueElement组件el

"

el-select

示例:

代码:

[span class=""hljs-name"">el-select v-model=""doc.zhic"" placeholder=""请选择""

[span class=""hljs-name"">el-option

v-for=""(item,index) in zhicdata""

:key=""index""

:label=""item.name""

:value=""item.id""

>

doc: {

zhic: """"

},

zhicdata: 【

{

name: ""主任医师"",

id: ""11""

},


//代码效果参考: https://v.youku.com/v_show/id_XNjQwNjg1MjIzNg==.html

{

name: ""副主任医师"",

id: ""12""

},

{

name: ""主治医师"",

id: ""13""

},

{

name: ""住院医师"",

id: ""14""

}

】,

// 获取职称

stepDoc(index){

this.idx=index;

const item = this.hislist【index】;

this.doc={

zhic:item.zhic.toString() //获取到的是数字,一定要转换为字符串

},

},

v-model中的值就是默认选中的值,一定要注意这里的:value的类型一定要跟v-model类型一样。值为空时,默认值为空值。

el-checkbox

示例:

代码:

[span class=""hljs-name"">el-checkbox-group v-model=""doc.doctime""

[span class=""hljs-name"">el-checkbox

v-for=""item in doctimeData""

:label=""item.id""

true-label

:key=""item.id""

@change=""changeDoctime(item.value)""

//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDM5NzI4MA==.html

>{ {item.title}}

更多内容请见原文,原文转载自:


"
image.png
相关文章
|
3月前
|
JavaScript
【Vue面试题十五】、说说你对slot的理解?slot使用场景有哪些?
这篇文章深入探讨了Vue中的`slot`概念,包括它的定义、使用场景和分类(默认插槽、具名插槽和作用域插槽),并通过代码示例展示了如何在组件中使用插槽来实现内容的分发和自定义。同时,文章还对插槽的工作原理进行了分析,解释了`renderSlot`函数和`$scopedSlots`对象的角色。
【Vue面试题十五】、说说你对slot的理解?slot使用场景有哪些?
|
15天前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
24 1
|
3月前
|
JavaScript 前端开发
【Vue面试题十二】、说说你对双向绑定的理解?
这篇文章深入探讨了Vue中的双向数据绑定机制,解释了其基于MVVM模式实现的原理,包括数据劫持、依赖收集、更新视图的流程,并提供了实现双向绑定的示例代码。
【Vue面试题十二】、说说你对双向绑定的理解?
|
11月前
【Vue2.0学习】—el与data的两种写法(三十六)
【Vue2.0学习】—el与data的两种写法(三十六)
|
JavaScript
一文搞懂Vue3中slot插槽的使用!
前言 使用 Vue 的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂。插槽(slot)可以说在一个 Vue 项目里面处处都有它的身影,比如我们使用一些 UI 组件库的时候,我们通常可以使用插槽来自定义我们的内容。 Vue3 已经推出很久了,也有越来越多的项目开始转向 Vue3 了,那么如果你对 Vue3 中的插槽还不熟悉,那么很有必要跟着本篇文章学习一下了!
1783 0
一文搞懂Vue3中slot插槽的使用!
|
JavaScript 前端开发
【Vue】el 和 data短小精湛的细节!
【Vue】el 和 data短小精湛的细节!
|
JavaScript API
elementui源码学习之仿写一个el-message
elementui源码学习之仿写一个el-message
147 1
elementui源码学习之仿写一个el-bread
elementui源码学习之仿写一个el-bread
114 0
|
JavaScript 前端开发 容器
elementui源码学习之仿写一个el-switch
elementui源码学习之仿写一个el-switch
168 0
elementui源码学习之仿写一个el-tag
elementui源码学习之仿写一个el-tag
169 0