vue 笔记

1、循环绑定

var vm = new Vue({
    el: '#banner',
    data: {
        banners: d.data_list.data_list
    }
});    

    <!--轮播图-->
    <div class="swiper-wrapper" id="banner">
        <div class="swiper-slide" v-for="item in banners"><a :href=item.url><img :src=item.imgurl></a></div> 
    </div>

2、表单及常用绑定

        $(function () {
            $.qr.ajax('UserCenter/myJdAndMl', { token: $.qr.gettoken() }, function (d) {
                var vm1 = new Vue({
                    el: '#sell',
                    data: {
                        jindou_num: d.data_single.jindou_num,
                        input_num: 0,
                        ratio: d.data_single.ratio
                    }
                });
            }); 
        });
        function sell_submit() {
            if (!$('#ck').hasClass('gou-on')) { $.qr.alert('', '请同意协议'); return false; }
            var data = $('#sell').serializeArray();  
            });
        }

<form id="sell" method="post" v-cloak v-on:submit.prevent="sell_submit">
    <div class="zhuanru-yue">
        <label>兑换黄金</label>
        <input type="number" class="text" name="num" placeholder="请输入兑换数量" v-bind:value=input_num v-on:input="input_num=$event.target.value;" />
        <input type="button" class="but" value="全部兑换" v-on:click="input_num=jindou_num" />
        <span style="border-bottom: 1px solid #eee;display: block;margin: 0 5%;"></span>
        <label>兑换活期黄金</label>
        <input type="number" class="text" placeholder="0.00" readonly v-bind:value=input_num/ratio />
        <span style="float: right;margin-right: 5%;font-size: 0.554rem;color: #333333;">克</span>
        <input type="hidden" v-bind:value=jindou_num name="ck_num" />
    </div>
    <div class="tixian-zhushi tixian-zhushi-no">可兑换金豆(个): {{jindou_num}}</div>


    <div class="fuzh fuzh1">
        <div class="gou gou-on gou-d" id="ck" v-on:click="$($event.target).toggleClass('gou-on')"></div>
        <div class="fuzh-wenz1">我已阅读并同意<a href="/faxian/view_tag?tag=h5_fwxy">《黄金喵用户协议》</a></div>
    </div>

    <input type="submit" value="确认" class="dengl-but">

</form>

 

转载于:https://www.cnblogs.com/jmzs/p/7088039.html