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组件的使用与禁用实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章:
- vue 自定义 select内置组件
- 详解Vue用自定义指令完成一个下拉菜单(select组件)
- vue2组件之select2调用的示例代码
- bootstrap select插件封装成Vue2.0组件
相关推荐
-
详解Vue用自定义指令完成一个下拉菜单(select组件)
这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货 基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道,directive的写法与组件 基本类似,只是方法名由component改为
-
vue2组件之select2调用的示例代码
目前,项目中使用了纯前端的静态项目+RESTFul接口的模式.为了更好的对数据进行操作,前端使用了vue2的mvvm功能,但是由于不是单页面应用,所以,并没有涉及到其它的如vue-route等功能,也未使用webpack等编译功能,所以,也没有使用.vue文件功能.这时候,如果用到控件,则多数从原jquery的组件中选择. select下拉搜索选择 这次的需求调研与设计是原来做winform开发的同事,由于用惯了devexpress这个控件库,所以,对于searchlookupeditor这个控
-
bootstrap select插件封装成Vue2.0组件
因为bootstrap-select功能比较强大,而且样式还不错,所以在项目使用了vue,所以,觉得对bootstrap-select进行封装. html 复制代码 代码如下: <my-select :options="input.options" v-model="input.value" ref="typeSelect" :index="index" :childidx="childIdx" :l
-
vue 自定义 select内置组件
1.整合了第三方 jQuery 插件 (select2) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="js/select2/select2.min.css" /> <style> html, body
-
vue select组件的使用与禁用实现代码
业务:消息推送方式有两种,为"微信"和"邮件",微信发送时需要选择"要发送的应用程序",邮件发送时不需要 微信发送时,页面如下: 邮件发送时,选择器不可用,页面如下: 虽然官网上没有给出具体的例子,但可从属性中查到 "disabled"属性, 属性 说明 类型 默认值 disabled 是否禁用 Boolean false 实现: 添加disabled属性,写成如下红色标记格式:定义一个isAble变量,用来存放TRUE和FA
-
vue中组件的过渡动画及实现代码
1. 和多个元素的过渡一样,用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </style> </head> <body> <div id="demo"> <button @click=&q
-
vue select组件绑定的值为数字类型遇到的问题
目录 select组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q
-
vue动态组件实现选项卡切换效果
本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g
-
Vue.js组件props数据验证实现详解
本文实例为大家分享了Vue.js组件props数据验证的具体代码,供大家参考,具体内容如下 数据验证 一般当组件需要提供给别人使用时,就需要使用数据验证. 示例: <script> Vue.component('my-component',{ props:{ //必须是数字类型 propA: Number, //必须是字符串或数字类型 propB:[String, Number], //布尔值,如果没有定义,默认值就是true propC:{ type: Boolean, default: t
-
Vue下拉选择框Select组件使用详解(二)
本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下 效果图如下: 下拉组件宽度可自定义设置以下属性: ①下拉组件宽度width属性,默认宽度290 ②placeholder属性 ③是否禁用下拉的disabled属性 已预设下拉列表最多8条,超过时滚动显示,具体可自定义调整,如果下拉选项过长省略号显示,鼠标悬浮显示全称,由于业务需求,设置mode属性,区别默认name和value 与 dictKey和dictVal ①创建组件Select.vue <tem
-
使用Vue自定义指令实现Select组件
本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu
-
Vue下拉选择框Select组件使用详解(一)
本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下 效果图如下: 展开图如下: ①创建组件Select.vue:预设两种主题色,亦可视情况进行自定义修改样式: <template> <div class="m-select-wrap"> <input :class="['u-select-input f16', color === 'blue' ? '' : 'white-color'
-
vue关于select组件绑定的值为数字类型的问题
目录 select组件绑定的值为数字类型问题 number可以将绑定的 v-model 改为 number类型 若元素属性需要绑定的值为数字时的处理 1.如果直接这样写 2.解决 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以. 如下所示: number可以将绑定的 v-model 改为
-
vue+elementUI组件tree如何实现单选加条件禁用
目录 vue+elementUI组件tree单选加条件禁用 使用如上方法就可以完成实现单选 完结!付上一个完成的代码- vue+elementUI组件tree单选加条件禁用 elementUI tree:http://element.eleme.io/#/zh-CN/component/tree 官方给出的API还是挺全的,但是示例木有给全,有几个API的说明也不是很能理解- tree实现带选择框的要加上node-key="id" show-checkbox两个属性, <el-t
随机推荐
- JavaScript对JSON数据进行排序和搜索
- Python使用django搭建web开发环境
- 详解Vue 2.0封装axios笔记
- 使用Jasmine和Karma对AngularJS页面程序进行测试
- iOS中读取照片库及保存图片或视频到照片库的要点解析
- python发腾讯微博代码分享
- Python在图片中添加文字的两种方法
- PHP删除二维数组中相同元素及数组重复值的方法示例
- PHP 5.6.11中CURL模块问题的解决方法
- CentOS 7下使用RPM安装mysql5.7.13
- 详解Windows下安装Nodejs步骤
- 用js查找法实现当前栏目的高亮显示的代码
- jquery实现倒计时功能
- 探讨:如何查看和获取SQL Server实例名
- Windows IIS配置Jsp和php环境方法
- Google Adsense常用技巧总结
- Java concurrency之公平锁(二)_动力节点Java学院整理
- 如何彻底删除SVN中的文件和文件夹(附恢复方法)
- C++中的几种排序算法
- Android实现系统语言切换功能