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>
复制代码

vue2.0实现银行卡类型种类的选择相关推荐

android 选择银行类型,vue2.0实现银行卡类型种类的选择
功能效果:vue2.0实现银行卡类型种类的选择参考代码如下: 卡类型 {{name}} export default { data() { return { actions2: [], //底部弹出 ...
vue2.0银行卡选择
功能效果:vue2.0实现银行卡类型种类的选择参考代码如下: <template><div class="app"><header></ ...
VUE2.0实现高德地图选择地点后进行行政区边界划分
最终效果图: 最终效果达到选择全部就描绘当前级联选择框下面的所有行政区,第二级开始描绘上一层加当前所有行政区预备知识: vue2.0.组件间传值.高德地图API(提前去高德地图提供的服务处申请好ke ...
vue2.0 如何自定义组件（vue组件的封装）
一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
项目vue2.0仿外卖APP（五）
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
Vue2.0 —— 由设计模式切入，实现响应式原理
Vue2.0 -- 由设计模式切入,实现响应式原理 <工欲善其事,必先利其器> 既然点进来了,麻烦你看下去,希望你有不一样的收获. 大家好,我是vk,好久不见,今天我们一起来盘一盘关于 V ...
vue2.0自学教程(一)：走进vue2.0大观园
人狠话不多,咱直入主题吧! 开发软件: Visual Studio Code 支持环境: nodejs+windows 版本: vue2.0 1.初识vue vue是一个前端框架,使用MVVM(Mod ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
【Vue2.0】黑马课程笔记（一）基本指令和过滤器
目录 1 了解 1.1 为什么要学习流行框架? 1.2 框架和库的区别 1.3 Node(后端)中的 MVC 与前端中的 MVVM 之间的区别 1.4 Vue 扩展插件 2 Vue简介 2.1 vu ...

vue2.0实现银行卡类型种类的选择

vue2.0实现银行卡类型种类的选择相关推荐

最新文章

热门文章