Vue + elementui 实现下拉框选择+自定义变量

Vue + elementui 实现下拉框选择+自定义变量

1、下载 elementui

> npm i element-ui -S

2、全局引入 在 main.js 写入一下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//样式文件一定要引入
Vue.use(ElementUI);

3.在页面写入以下代码
HTML

  <!-- 下拉选框 -->
    <div style="margin-top: 20px;position: relative;">
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item" :value="item">
</el-option>
      </el-select>
      <input
        style="position: absolute;left: 1px;height: 30px;top: 1px;
border: none;border-radius: 4px;padding-left: 10px;"
        type="text"
        placeholder="请输入或选择数据"
        v-model="value"
      />
    </div>
    <div>{{value}}</div>

JS

 data() {
    return {
      // 下拉选框
      options: ["黄金糕", "双皮奶", "蚵仔煎", "龙须面", "北京烤鸭"],
      value: ""
    };
  },