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 的开 ...
随机推荐
- python in操作引发 TypeError
在看 networkx 源代码的时候认为疑惑.为什么外层 for 要注意 TypeError.里面就不用.相同是 in, 一直纠结 node 是不是有问题,比方 node 不能够被迭代什么的,那么里面 ...
- .vscode folder
https://stackoverflow.com/questions/32964920/should-i-commit-the-vscode-folder-to-source-control Che ...
- jQuery插件开发初探
最简单的插件 $.fn.changeStyle = function (colorStr) { $(this).css('color',colorStr); } 应用如下: <!DOCTYPE ...
- Github-flavored Markdown 导出为 PDF
前提条件: 你可以访问Google和它相关的服务 第一步 到Chrome Store安装插件 Markdown Preview Plus 安装以后记得勾选 "允许访问文件网址" 设 ...
- 自动与因特网时间服务器同步 NTP 服务器 pool.ntp.org, 120.24.166.46 端口 123
自动与因特网时间服务器同步 NTP 服务器 pool.ntp.org 海康提供的NTP服务器 120.24.166.46 端口 123
- Vue总结(一)
vue总结 构建用户界面的渐进式框架 渐进式:用到什么功能即可使用转么的框架子模块. 两个核心点 向应的数据绑定 当时图发生改变->自动跟新视图,利用Object.defindProperty中 ...
- python pdb小结
Debug功能对于developer是非常重要的,python提供了相应的模块pdb让你可以在用文本编辑器写脚本的情况下进行debug. pdb是python debugger的简称.常用的一些命令如 ...
- Python基础班培训视频课程
课程目录:│ ├─第01天视频│ │ 01-课程介绍.avi│ │ 02-什么是操作系统.avi│ │ 03-生活中的操作系统.avi│ │ 04-操 ...
- Dcloud+mui 压缩上传图片到服务器
chooseImgFromAlbums选择图片 chooseImgFromPictures 拍照 changeToLocalUrl 转换成可用的路径 uploadpic.compressImg 压缩图 ...
- 【Henu ACM Round#14 E】Kefa and Watch
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 在做之前需要了解一个知识点. 就是如果一个字符串s是一个a循环串. (字符串的长度设为n,下标从1开始 那么s[1..n-a]和s[ ...