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 eval和JSON之间的联系
Dec 31 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
vuex实现数据状态持久化
Nov 11 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 fread函数使用方法总结
2019/05/28 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
Python中为什么要用self探讨
2015/04/14 Python
Python中random模块用法实例分析
2015/05/19 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python输出pdf文档的实例
2020/02/13 Python
python操作链表的示例代码
2020/09/27 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
电子商务自荐书范文
2014/01/04 职场文书
小学教师国培感言
2014/02/08 职场文书
小班重阳节活动方案
2014/02/08 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
设计顾问服务计划书
2014/05/04 职场文书
三下乡活动心得体会
2016/01/23 职场文书