vue2.0实现银行卡类型种类的选择
功能效果:vue2.0实现银行卡类型种类的选择
参考代码如下:
<template>
<div class="app">
<header>
</header>
<div class="details">
<div @click="memberRank">
<span>卡类型</span>
<span>{{name}}</span>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<mt-actionsheet :actions="actions2" v-model="sheetVisible2" cancel-text="">
</mt-actionsheet>
</div>
</template>
<script>
export default {
data() {
return {
actions2: [], //底部弹出提示框
sheetVisible2: false,//透明遮罩背景
name: "普卡"//默认数值
};
},
computed: {
},
components: {
},
methods: {
// 点击显示会员等级
memberRank() {
this.sheetVisible2 = true;
},
//赋值到框里
commonCard() {
this.name = "普卡";
},
silverCard() {
this.name = "银卡";
},
goldCard() {
this.name = "金卡";
},
},
mounted() {//移动但底部弹出选项
this.actions2 = [
{
name: "普卡",
method: this.commonCard
},
{
name: "银卡",
method: this.silverCard
},
{
name: "金卡",
method: this.goldCard
}
];
}
};
</script>
<style scoped>
header {
height: 1.5rem;
width: 100%;
background-image: linear-gradient(-134deg, #f62241 0%, #f62241 100%);
position: relative;
}
.details {
background: white;
margin-top: 0.3rem;
height: auto;
}
.details div span:nth-child(2):not(.phoneNum) {
position: absolute;
left: 4rem;
}
.details div {
clear: both;
border-bottom: 0.025rem solid rgba(0, 0, 0, 0.02);
height: 1.5rem;
line-height: 1.5rem;
font-size: 0.48rem;
color: rgba(0, 0, 0, 0.7);
margin-left: 0.5rem;
}
</style>
原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
vue2.0实现银行卡类型种类的选择的更多相关文章
- 项目vue2.0仿外卖APP(五)
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- 初学VUE2.0
初学VUE2.0 (个人笔记,写完后发现好乱....下期使用markdown书写.) 概述 webstorm添加对VUE的支持 http://www.jianshu.com/p/142dae4f8b5 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单
前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
- vue2.0 如何自定义组件(vue组件的封装)
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
- vue2.0自学教程(一):走进vue2.0大观园
人狠话不多,咱直入主题吧! 开发软件: Visual Studio Code 支持环境: nodejs+windows 版本: vue2.0 1.初识vuevue是一个前端框架,使用MVVM(Mode ...
- 重开Vue2.0
目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
- 转:Vue2.0+组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
随机推荐
- 怎样安装Windows7操作系统
1. 打开电脑,插入Windows7安装光盘. 2. 又一次启动电脑: 3. 依据提示按下对应的键.进入选择启动项菜单选择光驱引导.在"Boot Menu"界面按键盘上下键选 ...
- oracle_序列、索引、同义词
①序列 1.序列: 可供多个用户用来产生唯一数值的数据库对象 自己主动提供唯一的数值 共享对象 主要用于提供主键值 将序列值装入内存能够提高訪问效率 2.CREA ...
- 如何保证对象线程内唯一:数据槽(CallContext)
CallContext 是类似于方法调用的线程本地存储区的专用集合对象,并提供对每个逻辑执行线程都唯一的数据槽.数据槽不在其他逻辑线程上的调用上下文之间共享.当 CallContext 沿执行代码路径 ...
- quartz 持久化 数据库表
此处只包括配置数据库操作 quartz 持久化数据库表格字段解释建表,SQL语句在dbTables文件夹中可以找到,介绍下我们开发主要使用到的表: (版本不一样,可能数据库表也不一样,这里使用2.2. ...
- java 返回json格式的数据
1 阿里巴巴的fastjson import com.alibaba.fastjson.JSON; 使用的时候 JSON.toJSON(list); 2 Gson 解析json数据 import c ...
- CentOS下安装jdk1.8.0_181
我安装的为 jdk1.8.0_181 1.检查是否存在open jdk,不存在直接跳到第 5 步 java -version 查看当前系统自带的open jdk版本信息 2.查看包含java字符串的文 ...
- 【J-meter】参数及相应数据中文显示乱码问题
参考资料: http://www.51testing.com/html/00/130600-1360743.html http://www.cnblogs.com/fengpingfan/p/5851 ...
- Maven学习总结(19)——深入理解Maven相关配置
MAVEN2的配置文件有两个settings.xml和pom.xml settings.xml:保存的是本地所有项目所共享的全局配置信息,默认在maven安装目录的conf目录下,如果没有安装mave ...
- jvm vmthread
http://www.360doc.com/content/15/0615/16/15758456_478311946.shtml http://www.51testing.com/html/95/1 ...
- Eclipse+PyDev解决中文输入和注释问题
Eclipse的设置 window->preferences->general->editors->text editors->spelling->encoding ...