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 相关文章推荐
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
js中的this关键字详解
Sep 25 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
js实现分页功能
May 24 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 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 email邮箱正则
2008/10/08 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
JavaScript 中的replace方法说明
2007/04/13 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python实现统计代码行数的方法
2015/05/22 Python
python异常和文件处理机制详解
2016/07/19 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python入门必须知道的11个知识点
2018/03/21 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python代码编写计算器小程序
2020/03/30 Python
基于Python测试程序是否有错误
2020/05/16 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
C语言中break与continue的区别
2012/07/12 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
大四自我鉴定范文
2013/10/06 职场文书
机关作风建设自查报告
2014/10/22 职场文书
小学生表扬稿范文
2015/05/05 职场文书