vue select组件的使用与禁用实现代码


Posted in Javascript onApril 10, 2018

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

微信发送时,页面如下:

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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
javascript cookie的简单应用
Feb 24 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
纯JS代码实现气泡效果
May 04 Javascript
jQuery操作之效果详解
May 19 jQuery
javascript 缓冲运动框架的实现
Sep 29 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
vue 自定义 select内置组件
Apr 10 #Javascript
JavaScript如何对图片进行黑白化
Apr 10 #Javascript
axios 处理 302 状态码的解决方法
Apr 10 #Javascript
vue.js中npm安装教程图解
Apr 10 #Javascript
vue实现验证码按钮倒计时功能
Apr 10 #Javascript
vue 微信授权登录解决方案
Apr 10 #Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 #Javascript
You might like
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python使用代理ip访问网站的实例
2018/05/07 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
物流专业求职计划书
2014/01/10 职场文书
安全生产目标责任书
2014/04/14 职场文书
股票投资建议书
2014/05/19 职场文书
幼儿老师求职信
2014/06/30 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
2014最新离职证明范本
2014/09/12 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
开平碉楼导游词
2015/02/06 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
演讲开场白和结束语
2015/05/29 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python