vue select组件开启与禁用方法详解

这次给大家带来vue select组件开启与禁用方法详解,vue select组件开启与禁用的注意事项有哪些,下面就是实战案例,一起来看一下。

业务:消息推送方式有两种,为“微信”和“邮件”,微信发送时需要选择“要发送的应用程序”,邮件发送时不需要

微信发送时,页面如下:

页面

邮件发送时,选择器不可用,页面如下:

邮件页面

虽然官网上没有给出具体的例子,但可从属性中查到 “disabled”属性,

属性 说明 类型 默认值

disabled是否禁用Booleanfalse

实现:

  添加disabled属性,写成如下红色标记格式;定义一个isAble变量,用来存放TRUE和FALSE值,决定此选择框是否可用。

<Select v-bind:disabled="isAble" clearable v-model="dataAgentEntity.ID" style="width:240px">    {{ item.name }}   export default {   data(){     return{       isAble: false,//select下拉框是否可用     }   }

登录后复制

然后就是逻辑中操作变量isAble的值,改变组件的可用禁用状态了

 methods:{      Test(){       var vm = this;        if (vm.alertType == '邮件') {         vm.isAble = true; //不可用       }              }  }

登录后复制

test方法中只写了判断不可用,改回微信时,还要变成可用状态,不然又埋了个bug,哈哈。不过这是业务逻辑了,只介绍方法,记个笔记,具体视情况而定。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

合并多个数组时如何去重数据

判断上传图片类型与大小需要哪些步骤

以上就是vue select组件开启与禁用方法详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2766171.html

(0)
上一篇 2025年3月8日 11:11:46
下一篇 2025年3月1日 10:56:38

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • select内置组件使用详解

    这次给大家带来select内置组件使用详解,select内置组件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 1.整合了第三方 jQuery 插件 (select2) html, body { font: 13px/18px sa…

    2025年3月8日
    200
  • vue下拉列表实现方法

    这次给大家带来vue下拉列表实现方法,vue下拉列表实现的注意事项有哪些,下面就是实战案例,一起来看一下。 喜欢的请反手来个star,有issue的欢迎提出 安装 cnpm install vue-droplist –save 登录后复制…

    2025年3月8日
    200
  • 热模块替换有哪几种实现方法

    这次给大家带来热模块替换有哪几种实现方法,热模块替换的注意事项有哪些,下面就是实战案例,一起来看一下。 稍微研究了一下,发现在angular/cli创建的项目中,实现这个不算太难,步骤如下: 1、首先创建一个src/environments…

    编程技术 2025年3月8日
    200
  • JS访问DOM对象选中节点方法

    这次给大家带来JS访问DOM对象选中节点方法,JS访问DOM对象选中节点的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 使用getElementById()方法来访问指定id的节点,并用nodeName属性、nodeType属…

    2025年3月8日
    200
  • 遍历DOM文档树有哪些方法

    这次给大家带来遍历DOM文档树有哪些方法,遍历DOM文档树的注意事项有哪些,下面就是实战案例,一起来看一下。z 一 介绍 遍历文档树通过使用parentNode属性、firstChild属性、lastChild属性、previousSibl…

    2025年3月8日
    200
  • CDN优化首屏加载方法详解

    这次给大家带来CDN优化首屏加载方法详解,CDN优化首屏加载的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 作为一个网站应用,加载速度是非常重要的。加载速度,一个是程序的合理安排,如以组件按需加载,一个是js、css等资源的异步加…

    编程技术 2025年3月8日
    200
  • 使用jQuery复合选择器方法详解

    这次给大家带来使用jQuery复合选择器方法详解,使用jQuery复合选择器的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号“,…

    2025年3月8日
    200
  • 使用jQuery内容过滤器方法详解

    这次给大家带来使用jQuery内容过滤器方法详解,使用jQuery内容过滤器的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。内容过滤器共包括:conta…

    2025年3月8日
    200
  • vue父组件调用子组件有哪些方法

    这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下。 情景:   父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块.   父组…

    2025年3月8日
    200
  • vue实现全选反选方法总结

    这次给大家带来vue实现全选反选方法总结,vue实现全选反选的注意事项有哪些,下面就是实战案例,一起来看一下。 全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从…

    2025年3月8日
    200

发表回复

登录后才能评论