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 的开 ...
随机推荐
- FZOJ 2176 easy problem ( 树链剖分 )
pid=2176" target="_blank">题目链接~~> 做题感悟:感觉做多了树链剖分的题目,有很多是树链剖分 + 想法.. 解题思路: 这题非常明 ...
- Import .bak file to a database in SQL server
https://stackoverflow.com/questions/1535914/import-bak-file-to-a-database-in-sql-server On SQL Serve ...
- 学习《Python数据科学手册》高清中文PDF+高清英文PDF+代码
如果有一定的数据分析与机器学习理论与实践基础,<Python数据科学手册>这本书是绝佳选择. 是对以数据深度需求为中心的科学.研究以及针对计算和统计方法的参考书.很友好实用,结构很清晰.但 ...
- 推荐《机器学习实战:基于Scikit-Learn和TensorFlow》高清中英文PDF+源代码
探索机器学习,使用Scikit-Learn全程跟踪一个机器学习项目的例子:探索各种训练模型:使用TensorFlow库构建和训练神经网络,深入神经网络架构,包括卷积神经网络.循环神经网络和深度强化学习 ...
- redis练习手册<二>快速入门
Redis是一个开源,先进的key-value存储,并用于构建高性能,可扩展的Web应用程序的完美解决方案. Redis从它的许多竞争继承来的三个主要特点: Redis数据库完全在内存中,使用磁盘仅用 ...
- HOJ——T 1867 经理的烦恼
http://acm.hit.edu.cn/hoj/problem/view?id=1867 Source : HCPC 2005 Spring Time limit : 2 sec Memo ...
- bzoj1084【SCOI2005】最大子矩阵
1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 1946 Solved: 970 [Submit][id ...
- Android Studio升级到0.8.1后怎样设置字体大小?
升级到0.8.1后.打开设置字体大小页面.你会发现无论是Default还是Darcula,都不同意你改变字体的大小.事实上这个是由于这两个模式是Android Studio自带模式,所以不同意你修改, ...
- Android与webserver数据交互编程---3网络爬虫项目实现虚拟浏览器的jsp后台执行
背景:原先的b/s设计中在一个jsp界面中实现多个复杂的工作流... 为实现移动接口的调用保证工作流的正常webproject特别给提供了该虚拟浏览器的方案 原理:通过该方案实现虚拟浏览器后台运行js ...
- Onvif开发之服务端发现篇
服务端的开发相对来说比客户端稍微难一点,也就是给填充相关结构体的时候,需要一点一点的去查阅,验证各个结构中各个成员各自代表什么意思,以及对应的功能需要是那个接口实现,这是开发服务端最头疼的事情.(在开 ...