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 TextArea动态显示剩余字符
Oct 22 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php 文件上传实例代码
2012/04/19 PHP
php获取文件大小的方法
2014/02/26 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python常用库推荐
2016/12/04 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
NumPy中的维度Axis详解
2019/11/26 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
美国轮胎网站:Priority Tire
2018/11/28 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
会计系毕业求职信
2014/08/07 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
道歉的话语大全
2015/05/12 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
使用python向MongoDB插入时间字段的操作
2021/05/18 Python