vue 不使用select实现下拉框功能(推荐)


Posted in Javascript onMay 17, 2018

html部分:v-for循环出的结构

<div >
  <p @click="clickSize (item, index)">{{item.name}}</p> 
  <transition name="opacityLeave">
   <div class="condition-list" v-show="isShowSize && index == i">
    <div class="size-wrap" v-if="item.RingSize">
     <p class="size" :class="{'active':item1.active}" :key="index1" v-for="(item1, index1) in item.RingSize" @click="getSize (item, item1) ">{{item1.AttrValueName}}</p>
    </div>
   </div>
  </transition>
</div>

js部分:

data() {
 return {
  isShowSize: false,
  i: -1
 };
 },
//实现点击哪个下拉框显示
  clickSize (item, index) {
  this.i = index;
  this.isShowSize = !this.isShowSize;
 },
//实现选取下拉值
 getSize (item, item1) {
  this.item.name = item1.AttrValueName;
  this.isShowSize = !this.isShowSize;
 },

下面看下vue--select组件的使用与禁用

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

微信发送时,页面如下:

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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
用js遍历 table的脚本
Jul 23 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
React key值的作用和使用详解
Aug 23 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
微信小程序自定义多选事件的实现代码
May 17 #Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 #Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 #Javascript
vue 路由嵌套高亮问题的解决方法
May 17 #Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 #Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 #Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 #Javascript
You might like
xajax写的留言本
2006/11/25 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
理解javascript异步编程
2016/01/27 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
ES6基础之默认参数值
2019/02/21 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
django session完成状态保持的方法
2018/11/27 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers