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>