二选一选择支付方式 vue实现

作者: daoqing99 | 来源:发表于2017-03-08 15:31 被阅读0次

二选一选择支付方式 vue实现
vue项目的创建
组件的v-model
二、Vue数据绑定
新手支付对接流程重点
IOS接入Stripe支付
11Vue.js实现全选与反选
vue总结
再一次实战策略模式，真是太好用了
银联支付实现（简述）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .paymentweixin {
        width: 100%;
        height: 72px;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
    }
    
    .paymentweixinimg {
        width: 45px;
        margin-top: 15px;
        margin-left: 10px;
    }
    
    .queren {
        width: 25px;
        position: absolute;
        top: 25px;
        right: 15px;
    }
    </style>
</head>

<body>
    <div id='payMethod'>
        <div class="paymentweixin" @click="weixin">
            <img Arc="weixin.png" class="paymentweixinimg" />
            <img Arc="quren.png" v-show="isShowA" class="queren" />
            <img Arc="cancel.png" v-show="isShowB" class="queren" />
        </div>
        <div class="paymentweixin" @click="zhifubao">
            <img Arc="zhifubao.png" class="paymentweixinimg" />
            <img Arc="cancel.png" v-show="isShowA" class="queren" />
            <img Arc="quren.png" v-show="isShowB" class="queren" />
        </div>
    </div>
    <script src="http://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
    <script type="text/javascript">
    //http://om1gg1n7c.bkt.clouddn.com/quren.png
    //http://om1gg1n7c.bkt.clouddn.com/cancel.png
    //http://om1gg1n7c.bkt.clouddn.com/zhifubao.png
    //http://om1gg1n7c.bkt.clouddn.com/weixin.png
    //          选择支付方式
    var vm = new Vue({
        el: "#payMethod",
        data: {
            isShowA: true,
            isShowB: false
        },
        methods: {
            weixin: function() {
                if (this.isShowA) {
                    this.isShowA = true;
                    this.isShowB = false;
                } else {
                    this.isShowA = true;
                    this.isShowB = false;
                }
            },
            zhifubao: function() {
                if (this.isShowA) {
                    this.isShowA = false;
                    this.isShowB = true;
                }
            }
        }
    })
    </script>
</body>

</html>