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 相关文章推荐
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
仿京东快报向上滚动的实例
Dec 13 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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 jQuery表单,带验证具体实现方法
2014/02/15 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
javascript call和apply方法
2008/11/24 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
pytorch 常用线性函数详解
2020/01/15 Python
Python接口自动化测试的实现
2020/08/28 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
后勤岗位职责
2013/11/26 职场文书
医务人员自我评价
2014/01/26 职场文书
品牌宣传方案
2014/03/21 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
政审证明范文
2015/06/19 职场文书
2016继续教育研修日志
2015/11/13 职场文书
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL