功能效果:vue2.0实现银行卡类型种类的选择

图片.png

参考代码如下:

<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实现银行卡类型种类的选择的更多相关文章

  1. 项目vue2.0仿外卖APP(五)

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

  2. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  3. 初学VUE2.0

    初学VUE2.0 (个人笔记,写完后发现好乱....下期使用markdown书写.) 概述 webstorm添加对VUE的支持 http://www.jianshu.com/p/142dae4f8b5 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

  5. vue2.0 如何自定义组件(vue组件的封装)

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  6. vue2.0自学教程(一):走进vue2.0大观园

    人狠话不多,咱直入主题吧! 开发软件: Visual Studio Code 支持环境: nodejs+windows 版本: vue2.0 1.初识vuevue是一个前端框架,使用MVVM(Mode ...

  7. 重开Vue2.0

    目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...

  8. Vue2.0+组件库总结

    转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...

  9. 转:Vue2.0+组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

随机推荐

  1. FZOJ 2176 easy problem ( 树链剖分 )

    pid=2176" target="_blank">题目链接~~> 做题感悟:感觉做多了树链剖分的题目,有很多是树链剖分 + 想法.. 解题思路: 这题非常明 ...

  2. 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 ...

  3. 学习《Python数据科学手册》高清中文PDF+高清英文PDF+代码

    如果有一定的数据分析与机器学习理论与实践基础,<Python数据科学手册>这本书是绝佳选择. 是对以数据深度需求为中心的科学.研究以及针对计算和统计方法的参考书.很友好实用,结构很清晰.但 ...

  4. 推荐《机器学习实战:基于Scikit-Learn和TensorFlow》高清中英文PDF+源代码

    探索机器学习,使用Scikit-Learn全程跟踪一个机器学习项目的例子:探索各种训练模型:使用TensorFlow库构建和训练神经网络,深入神经网络架构,包括卷积神经网络.循环神经网络和深度强化学习 ...

  5. redis练习手册<二>快速入门

    Redis是一个开源,先进的key-value存储,并用于构建高性能,可扩展的Web应用程序的完美解决方案. Redis从它的许多竞争继承来的三个主要特点: Redis数据库完全在内存中,使用磁盘仅用 ...

  6. HOJ——T 1867 经理的烦恼

    http://acm.hit.edu.cn/hoj/problem/view?id=1867 Source : HCPC 2005 Spring   Time limit : 2 sec   Memo ...

  7. bzoj1084【SCOI2005】最大子矩阵

    1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 1946  Solved: 970 [Submit][id ...

  8. Android Studio升级到0.8.1后怎样设置字体大小?

    升级到0.8.1后.打开设置字体大小页面.你会发现无论是Default还是Darcula,都不同意你改变字体的大小.事实上这个是由于这两个模式是Android Studio自带模式,所以不同意你修改, ...

  9. Android与webserver数据交互编程---3网络爬虫项目实现虚拟浏览器的jsp后台执行

    背景:原先的b/s设计中在一个jsp界面中实现多个复杂的工作流... 为实现移动接口的调用保证工作流的正常webproject特别给提供了该虚拟浏览器的方案 原理:通过该方案实现虚拟浏览器后台运行js ...

  10. Onvif开发之服务端发现篇

    服务端的开发相对来说比客户端稍微难一点,也就是给填充相关结构体的时候,需要一点一点的去查阅,验证各个结构中各个成员各自代表什么意思,以及对应的功能需要是那个接口实现,这是开发服务端最头疼的事情.(在开 ...