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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 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
文章推荐系统(二)
2006/10/09 PHP
福利彩票幸运号码自动生成器
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
python操作xml文件示例
2014/04/07 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python去除字符串中的换行符
2017/10/11 Python
Python绘制3D图形
2018/05/03 Python
Python3中的json模块使用详解
2018/05/05 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
使用Python pip怎么升级pip
2020/08/11 Python
python中round函数保留两位小数的方法
2020/12/04 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
出差报告格式模板
2014/11/06 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
2016年教师节慰问信
2015/12/01 职场文书