Element UI学习1--select选择器

最新推荐文章于 2024-12-25 15:34:56 发布

爱喝奶茶的小韩

最新推荐文章于 2024-12-25 15:34:56 发布

阅读量785

点赞数 1

分类专栏： element ui vue 文章标签： vue

本文链接：https://blog.csdn.net/hanrabbit/article/details/112249364

版权

本文介绍了Element UI的基础，包括其作为基于Vue 2.0的组件库的定位。详细讲述了使用步骤，如npm安装、CDN引入和通过vue ui配置。重点讲解了select选择器的用法，包括基础用法、创建条目和分组，是学习Element UI的实用教程。

摘要由CSDN通过智能技术生成

文章目录

一、Element UI是什么？
二、使用步骤
- 1.安装
- 2.select选择器
总结

一、Element UI是什么？

Element 饿了么前端出品的一套基于 Vue 2.0 的桌面端组件库

二、使用步骤

1.安装

1、npm 安装

npm i element-ui -S

2、CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3、脚手架安装
如果电脑安装了vue-cli脚手架，可以直接输入 vue ui，在项目里配置Element UI组件

2.select选择器

当选项过多时，使用下拉菜单展示并选择内容。
1、基础用法
代码如下：

<el-select v-model="value" placeholder="请选择">
     <el-option 
     v-for="item in options" 
     :key="item.value" 
     :label="item.label" 
     :value="item.value" >
     </el-option>
</el-select>