一个菜鸟的互联网技术分享博客
您的位置: 主页 > Vue+element-ui多选下拉
advertisement

Vue+element-ui多选下拉


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>test</title>  
  5.     <meta charset="utf-8">  
  6.     <!-- 引入样式 -->  
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">  
  8.       
  9. </head>  
  10. <body>  
  11.     <div id="app">  
  12.         <el-select v-model="value5" multiple placeholder="请选择">  
  13.             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">  
  14.             </el-option>  
  15.         </el-select>  
  16.       </div>  
  17. </body>  
  18. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  19. <!-- 引入组件库 -->  
  20. <script src="https://unpkg.com/element-ui/lib/index.js"></script>  
  21.  <script>  
  22.     new Vue({  
  23.       el: '#app',  
  24.       data() {  
  25.           return {  
  26.             options: [{  
  27.               value: '百度',  
  28.               label: '百度'  
  29.             }, {  
  30.               value: '阿里巴巴',  
  31.               label: '阿里巴巴'  
  32.             }, {  
  33.               value: '腾讯',  
  34.               label: '腾讯'  
  35.             }, {  
  36.               value: '京东',  
  37.               label: '京东'  
  38.             }, {  
  39.               value: '网易',  
  40.               label: '网易'  
  41.             }, {  
  42.               value: 'B站',  
  43.               label: 'B站'  
  44.             }, {  
  45.               value: '字节跳动',  
  46.               label: '字节跳动'  
  47.             }  
  48.             ],  
  49.             value5: []  
  50.           }  
  51.         }  
  52.     })  
  53.   </script>  
  54. </html>  

效果图如下:



zhangren.online
上一篇:eslint语法限制项目报错解决办法
下一篇:Vue项目碰到"‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件"报错

您可能喜欢

​Vue计算属性的setter和getter

​Vue计算属性的setter和getter

​eslint语法限制项目报错解决办法

​eslint语法限制项目报错解决办法

​Vue的生命周期及代码实例

​Vue的生命周期及代码实例

​Vue之计算属性、方法、侦听器

​Vue之计算属性、方法、侦听器

回到顶部