1.Vue中下拉框的简单设置

最新推荐文章于 2024-05-13 15:14:25 发布

天天yaya吖

最新推荐文章于 2024-05-13 15:14:25 发布

阅读量1.8k

点赞数

分类专栏： # vue学习文章标签： vue 下拉框

本文链接：https://blog.csdn.net/sinat_41124751/article/details/97395068

版权

vue学习专栏收录该内容

14 篇文章 34 订阅

订阅专栏

1.<template>页面部分
<div class="select-style">
  <el-select v-model="value" placeholder="请选择">  <!-- v-model绑定值，placeholder默认显示--> 
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"     
      :value="item.value">   <!-- label、value值可自定义，可用于后期判断等--> 
    </el-option>
  </el-select>
</div>
2.<script>部分
data() {
  return {
    options: [{
      value: '1',
      label: '一年'
    }, {
      value: '1/2',
      label: '半年'
    }, {
      value: '1/4',
      label: '一季度'
    }, {
      value: '1/12',
      label: '一个月'
    }],
    value: '',
  }
}
3.<style>部分的css样式
.select-style {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid #15285b !important;
  color: #ffffff !important;
  font-size: 12px;
}

只是简单的理解，若有错误还望谅解指正！