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


Posted in Javascript onMay 17, 2018

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组件的使用与禁用

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

微信发送时,页面如下:

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

邮件发送时,选择器不可用,页面如下:

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实现下拉框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
微信小程序自定义多选事件的实现代码
May 17 #Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 #Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 #Javascript
vue 路由嵌套高亮问题的解决方法
May 17 #Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 #Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 #Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 #Javascript
You might like
DIY实用性框形天线
2021/03/02 无线电
PHP面向对象程序设计之接口用法
2014/08/20 PHP
Laravel日志用法详解
2016/10/09 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python正则分析nginx的访问日志
2017/01/17 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
合作意向书模板
2014/03/31 职场文书
批评与自我批评范文
2014/10/15 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
离婚协议书格式
2015/01/26 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
员工手册编写范本
2015/05/14 职场文书
风之谷观后感
2015/06/11 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
大学生军训感言
2015/08/01 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript