vue 实现单选框
参考:https://blog.csdn.net/qq_42221334/article/details/81630634
效果:
vue:
<template>
<div>
<p class="title">支付方式</p>
<section class="selectPay">
<ul class="payBox active" id="payBox">
<li class="payWay" v-for="(item,index) in payList" @click="addImg(index,item)">
<span>{{item}}</span>
<span class="chooseIcon" :class="payIndex==index?'active':''"></span>
</li>
</ul>
</section>
<p v-if="payList.length>3" class="useMore"><span class="moreBtn" @click="useMore">使用更多</span></p>
</div>
</template> <script>
export default {
data() {
return {
payList: ["微信支付", "支付宝支付", "线下支付", '其他支付'],
payIndex: 0, //默认选中第一个
isBlanced: true //用于取消选中
}
},
methods: {
addImg: function(index, item) { //选择支付方式
let _this = this;
_this.isBlanced = !_this.isBlanced;
if (_this.payIndex == index) {
if (!_this.isBlanced) {
_this.payIndex = -1;
} else {
_this.payIndex = index;
}
} else {
_this.payIndex = index;
}
},
useMore() { //查看更多
let payBox = document.getElementById('payBox'),
moreBtn = document.getElementsByClassName('moreBtn')[0];
if (this.hasClass(payBox, 'active')) {
this.removeClass(payBox, 'active');
moreBtn.innerHTML = "收起";
} else {
this.addClass(payBox, 'active');
moreBtn.innerHTML = "展开全部";
}
},
hasClass(el, cl) {
var clArr = el.className.split(' ');
if (clArr.indexOf(cl) != -1) {
return clArr;
} else {
return false;
}
},
addClass(el, cl) {
if (!this.hasClass(el, cl)) {
var oldcl = el.className;
el.className = oldcl ? oldcl + ' ' + cl : cl;
}
},
removeClass(el, cl) {
var clArr = this.hasClass(el, cl);
if (clArr) {
clArr.splice(clArr.indexOf(cl), 1);
el.className = clArr.join(' ');
}
}
} }
</script> <style scoped>
div {
font-size: 16px;
background: #fff;
} .title {
font-size: 20px;
padding: .1rem 0;
border-bottom: 1px solid #eee;
} .payBox.active {
max-height: 1.8rem;
overflow: hidden;
} .payWay {
height: .6rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid #eee;
padding: 0 .15rem;
align-items: center;
justify-content: space-between;
} .chooseIcon {
width: .2rem;
height: .2rem;
display: inline-block;
background: url(../assets/images/shopMall/noselect2.png)no-repeat;
background-size: 100%;
} .chooseIcon.active {
width: .2rem;
height: .2rem;
display: inline-block;
background: url(../assets/images/shopMall/hasSelect1.png)no-repeat;
background-size: 100%;
} .useMore {
color: #fe6903;
background: #fff;
padding: .1rem 0 .2rem 0;
}
</style>
vue 实现单选框的更多相关文章
- vue中单选框与多选框的实现与美化
我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意.于是,决定自己来实现单选框和复选框.我用的是vue,所以就用vue的方式实现 ...
- vue中单选框,利用不存在的值标示选中状态
1.效果预览 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- vue的单选框
- ~Vue实现简单答题功能,主要包含单选框和复选框
内容 实现简单答题效果 环境 Vue,webpack(自行安装) 实现方式 页面将答题列表传递给调用组件,组件将结果返回给调用页面(其它模式也ok,这只是例子) ------------------- ...
- 使用vue如何默认选中单选框
使用了vue以后,发现这真的是一个灵活高效的框架,能够轻松实现页面的实时刷新.那么,今天先聊聊单选框的使用.一般我们使用单选框,会这么写: //HTML <input type=" c ...
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
- vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框
vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...
- Vue 单选框与单选框组 组件
radio组件 v-model : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...
- vue 下拉框单选、多选以及默认值
背景: 单选框和多选框 都是使用了 el-select,但传给后端的值类型不一样,多选框传的值是 list类型: ['value1','value2'] ,单选框传值和其他类型一样:设置默认值也是如此 ...
随机推荐
- Spark运行架构设计
- NLP杂点
1.停用词 stop words: 在处理自然语言数据(或文本)之前或之后会自动过滤掉某些字或词. 停用词都是人工输入.或者由一个停用词表导入. 2.jieba是目前最好的 Python 中文分词组件 ...
- CSS——背景渐变
在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧.从右侧到左侧.从顶部到底部.从底部到顶部或着沿任何任意轴.如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生. 兼容性问题很 ...
- from Crypto.Cipher import AES加密解密
一.代码 from Crypto.Cipher import AES import base64 """ AES加密算法 """ #加密 d ...
- 关于css布局的定位问题
虽然职位说是PHP程序,但实际上什么都要做些,排版当然也免不了了,以前自己做网站时就能排出网页了,但是很多东西不系统,有点走马观花,例如关于这个css布局定位的问题就是,今天特意总结了一下,知识这东西 ...
- VS2010-MFC(常用控件:编辑框Edit Control)
转自:http://www.jizhuomi.com/software/181.html 编辑框(Edit Control)是一种很常用的控件,我们可以在编辑框中输入并编辑文本.在前面加法计算器的例子 ...
- 搞大数据,你不懂这三大数据处理趋势就OUT了
搞大数据,你不懂这三大数据处理趋势就OUT了 企业数据每年以PB级甚至上百PB爆炸式增长,越来越大的数据量正为扩大分析策略在企业应用软件领域的拓展提供了数据基础,但数据的价值是有时效性的,越早分析越能 ...
- 19.SimLogin_case01
什么是模拟登录? 要抓取的信息,只有在登录之后才能查看.这种情况下,就需要爬虫做模拟登录,绕过登录页. cookies和session的区别: cookie数据存放在客户的浏览器上,session数据 ...
- python代码打包成exe文件
1.准备工作 1.安装pywin32.pyinstaller 2.准备好ico文件 找一个png格式的图片,使用png2ico脚本生成包含以下6个尺寸的ico文件:128×128 64×64 48×4 ...
- <每日一题>题目3:编写装饰器,为多个函数加上记录调用功能,要求每次调用函数都将被调用的函数名称写入文件
def log(func): def inner(*args,**kwargs): with open('log',mode='a',encoding='utf-8') as f: #以追加的方式打开 ...