一文搞懂:关于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使用场景有哪些?
|
3月前
|
JavaScript 前端开发
【Vue面试题十二】、说说你对双向绑定的理解?
这篇文章深入探讨了Vue中的双向数据绑定机制,解释了其基于MVVM模式实现的原理,包括数据劫持、依赖收集、更新视图的流程,并提供了实现双向绑定的示例代码。
【Vue面试题十二】、说说你对双向绑定的理解?
|
3月前
|
JavaScript 容器
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
这篇文章讲解了Vue中组件的基本使用方法,包括组件的定义、注册和使用过程,并通过代码实例演示了非单文件组件的创建和使用,同时指出了一些使用组件时的注意事项。
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
|
11月前
【Vue2.0学习】—el与data的两种写法(三十六)
【Vue2.0学习】—el与data的两种写法(三十六)
|
11月前
【Vue2.0学习】—class与style绑定(三十八)
【Vue2.0学习】—class与style绑定(三十八)
|
JavaScript 前端开发
【Vue】el 和 data短小精湛的细节!
【Vue】el 和 data短小精湛的细节!
|
JavaScript 前端开发
Vue —— 基础(零)(模板语法、数据绑定、el/data写法、MVVM模型)
Vue —— 基础(零)(模板语法、数据绑定、el/data写法、MVVM模型)
112 0
|
JavaScript 前端开发
【vue2】基础概念 01 (vue框架介绍、el、data、插值表达式)
vue框架介绍、结构元素详解(el、data、插值表达式)
【vue2】基础概念 01 (vue框架介绍、el、data、插值表达式)
|
JavaScript 前端开发 API
vue3 源码学习,实现一个 mini-vue(十一):组件的设计原理与渲染方案
在实现了 `ELEMENT`、`COMMENT`、`TEXT` 节点的挂载后,我们最后再来实现一下组件的挂载与更新
vue3 源码学习,实现一个 mini-vue(十一):组件的设计原理与渲染方案
|
JavaScript 开发者
Vue的组件一共有哪些?底层原理是什么?
Vue的组件一共有哪些?底层原理是什么?
120 0