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改为
-
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
-
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组件的使用与禁用实现代码
业务:消息推送方式有两种,为"微信"和"邮件",微信发送时需要选择"要发送的应用程序",邮件发送时不需要 微信发送时,页面如下: 邮件发送时,选择器不可用,页面如下: 虽然官网上没有给出具体的例子,但可从属性中查到 "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表格样式_鼠标划过行变色 简洁实现
- Erlang IO编程之文件目录操作常用方法小结
- Windows安装Node.js报错:2503、2502的解决方法
- canvas实现十二星座星空图
- “SQL2000数据库”运行在普通用户下所需的权限
- PHP 错误之引号中使用变量
- 社区(php&&mysql)一
- 微信小程序实现根据字母选择城市功能
- nginx禁止dedecms目录php执行权限
- CentOS 5.4 服务器配置 yum安装Apache+php+Mysql
- Python随机生成数模块random使用实例
- JDBC SQL语法
- 浅谈Linux下免密码切换到root用户当注意的问题
- .NET c# 单体模式(Singleton)
- 详细解读PHP中接口的应用
- Android Fragment使用之实例演示
- pandas把dataframe转成Series,改变列中值的类型方法
- VMware Workstation 12 Pro安装linux教程
- NetBeans安装提示neatbeans cannot find java 1.8 or higher
- 易语言将十进制数值转换为十六进制文本的方法