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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
简单了解JavaScript异步
May 23 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
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指定函数参数默认值示例代码
2013/12/04 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
js switch case default 的用法示例介绍
2013/10/23 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
Django 视图层(view)的使用
2018/11/09 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
2014庆六一活动方案
2014/03/02 职场文书
入党介绍人评语
2014/05/06 职场文书
个人汇报材料范文
2014/12/30 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
如何利用golang运用mysql数据库
2022/03/13 Golang