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 相关文章推荐
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 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
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python编程线性回归代码示例
2017/12/07 Python
python查看列的唯一值方法
2018/07/17 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
关于逃课的检讨书
2014/01/23 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
2014年创卫实施方案
2014/02/18 职场文书
教书育人演讲稿
2014/09/11 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
初中语文教学研修日志
2015/11/13 职场文书
创业计划书之游泳馆
2019/09/16 职场文书