vue 不使用select实现下拉框功能(推荐)

html部分：v-for循环出的结构

<div >
  <p @click="clickSize (item, index)">{{item.name}}</p>
  <transition name="opacityLeave">
   <div class="condition-list" v-show="isShowSize && index == i">
    <div class="size-wrap" v-if="item.RingSize">
     <p class="size" :class="{'active':item1.active}" :key="index1" v-for="(item1, index1) in item.RingSize" @click="getSize (item, item1) ">{{item1.AttrValueName}}</p>
    </div>
   </div>
  </transition>
</div>

js部分：

data() {
 return {
  isShowSize: false,
  i: -1
 };
 },
//实现点击哪个下拉框显示
  clickSize (item, index) {
  this.i = index;
  this.isShowSize = !this.isShowSize;
 },
//实现选取下拉值
 getSize (item, item1) {
  this.item.name = item1.AttrValueName;
  this.isShowSize = !this.isShowSize;
 },

下面看下vue--select组件的使用与禁用

业务：消息推送方式有两种，为“微信”和“邮件”，微信发送时需要选择“要发送的应用程序”，邮件发送时不需要

微信发送时，页面如下：

邮件发送时，选择器不可用，页面如下：

虽然官网上没有给出具体的例子，但可从属性中查到 “disabled”属性，

属性 说明 类型 默认值
disabled 是否禁用 Boolean false

实现：

添加disabled属性，写成如下红色标记格式；定义一个isAble变量，用来存放TRUE和FALSE值，决定此选择框是否可用。

<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px">
  <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option>
 </Select> 

export default {
 data(){
  return{
   isAble: false,//select下拉框是否可用
  }
 }

然后就是逻辑中操作变量isAble的值，改变组件的可用禁用状态了

 methods:{
   Test(){
   var vm = this;
    if (vm.alertType == '邮件') {
    vm.isAble = true; //不可用
   } 

   }
}

test方法中只写了判断不可用，改回微信时，还要变成可用状态，不然又埋了个bug，哈哈。不过这是业务逻辑了，只介绍方法，记个笔记，具体视情况而定。

以上所述是小编给大家介绍的vue 不使用select实现下拉框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • vue.js 嵌套循环、if判断、动态删除的实例

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API app.html <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs 嵌套循环.if判断 </title> <

  • VUE在for循环里面根据内容值动态的加入class值的方法

    最近在做玩家蚂蚁项目的时候遇到了一个评分显示的小功能,这个在前端显示的星星是用class样式来进行控制的 class =" real-star comment-stars-width5 " 数据库里记录的信息只有一个评分1-5.我们如果用一般的php方法直接在class里面用 comment-stars-width{$score}这样是行不通的.在查了很多资料和做过很多尝试以后,确定了一个可行的方法 我们使用vue的:class来进行class的绑定.:class="`com

  • Vue.js做select下拉列表的实例(ul-li标签仿select标签)

    目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表. 知识点: 组件的写法及运用 组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数据的绑定(v-bind) 自定义事件通信 效果图: 1.未做任何操作前,下拉列表为隐藏状态 2.点击输入框显示下拉列表 3. 点击列表项,输入框值跟随改变 PS: 为了演示data1, data2两组数据的绑定,实例中创建了两个列表 html代码: <!DOCTYPE html> <html

  • 关于vue v-for循环解决img标签的src动态绑定问题

    在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧. 1.目录结构如下 图片放置在与src同级的static文件夹下,在这里,我放置在slider中 2.数据配置如下: 注意引入的路径,直接从static文件中对应的地方引入. data () { return { product:[ { "src":'../../static/slider/logo1.jpg', "decerat

  • vue select选择框数据变化监听方法

    1.使用v-model在select标签上进行数据双向绑定, 2.在data里边添加val:' ', 3.最后就是监听事件的写法,写在methods之外. 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue动态循环出的多个select出现过的变为disabled(实例代码)

    vue动态循环出的多个select出现过的变为disabled <template> <div class="artcle"> <el-form label-width="100px" :model="testForm"> <el-form-item v-for="(vtem, index) in testForm.version" :key="index" lab

  • Vue Element 分组+多选+可搜索Select选择器实现示例

    Vue Element 分组+多选+可搜索Select选择器实现示例

    最终效果(http://47.98.205.88:3000/mult_group_selection)见下图.实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选.供有相关需求的开发者参考 准备工作: 除了vue脚手架.element等必要包之外.该项目还用到了linq.js(https://github.com/mihaifm/linq),该工具可以快速从数组中查找所需内容. npm install --save linq

  • VUE v-for循环中每个item节点动态绑定不同函数的实例

    一. 业务场景: 一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件 二. 思路 : 按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定 三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构部分 <!-- 多个button组件--> <titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAd

  • 实例分析vue循环列表动态数据的处理方法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

随机推荐