请选择 进入手机版 | 继续访问电脑版
爱气象,爱气象家园! 

气象家园

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

搜索
查看: 4882|回复: 1

Vue编程学习之下拉菜单select

[复制链接]

新浪微博达人勋

发表于 2021-10-12 10:50:57 | 显示全部楼层 |阅读模式

登录后查看更多精彩内容~

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

x
下拉菜单在前端中叫select,Qt里叫droplist


基础版


效果图:


下拉菜单.png


组件代码:


<template>
    <div id="app">
      <span>被选条目是:{{which_city}}</span>
      <br/>
        <select v-model="which_city">
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                which_city: '广州'
            }
        }
    }
</script>


我的思考:
该版本写法可用,无明显弊端

密码修改失败请联系微信:mofangbao

新浪微博达人勋

 楼主| 发表于 2021-10-12 16:00:54 | 显示全部楼层
Element版


效果图:


000.png


组件代码:


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

<script>

let data=[{value: '选项1',label: '北京'},
          {value: '选项2',label: '上海'},
          {value: '选项3',label: '广州'},
          {value: '选项4',label: '深圳'},
          {value: '选项5',label: '成都'}]

  export default {
    data() {
      return {
        options: data,
        value: ''
      }
    }
  }
</script>



我的思考:
这个写法用了for循环,可以将所有选项写在一个变量data中
密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

Copyright ©2011-2014 bbs.06climate.com All Rights Reserved.  Powered by Discuz! (京ICP-10201084)

本站信息均由会员发表,不代表气象家园立场,禁止在本站发表与国家法律相抵触言论

快速回复 返回顶部 返回列表