This time I will show you how to operate vue2 to implement shopping cart and address selection. What are the precautions for operating vue2 to implement shopping cart and address selection. The following is a practical case. Let’s take a look. .
First of all, vue basic js writing method
new Vue({ el:"#app", //模型 data:{ }, filters:{ }, mounted:function(){ this.$nextTick(function(){ //初始化调用 }); }, computed:{ //实时计算 }, methods:{ } });
v-for
<li v-for="(item,index) in productList"> <p class="item-name">{{item.productName}}</p> </li>
v-model
(real-time update)<input type="text" value="0" disabled v-model="item.productQuantity"> <p class="item-price-total">{{item.productQuantity}}</p>
v-bind
<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}"> <!--可通过更改item.checked的值设置是否选中--> <!--必须用v-bind 不可直接在class里面直接使用{{}}--> <!--v-bind:class= 可简写为 :class= -->
filtersFilter Use of #1.html reference method
<p class="item-price">{{item.productPrice | money('元')}}</p>
filters:{ formatMoney:function(value,type){ return "¥"+value.toFixed(2)+ type; } },
Vue.filter("money",function(value,type){ return "¥"+value.toFixed(2) + type; //保留两位小数 结果eg:¥19.00元 });
@click="method(param)" //或者 @click="delFlag=false" @click="limitNum=addressList.length"
is as follows: three pieces of data are displayed by default, click more to display all
<li v-for="(item,index) in filterAddress"> <p class="shipping-addr-more"> <a class="addr-more-btn up-down-btn" href="javascript:" @click="limitNum=addressList.length"> more <i class="i-up-down"> <i class="i-up-down-l"></i> <i class="i-up-down-r"></i> </i> </a> </p> data:{ limitNum:3 }, computed:{ filterAddress:function(){ return this.addressList.slice(0,this.limitNum); } },
<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"> <!--其中currentIndex在js里需要定义-->
<ul> <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1"> <p class="name">标准配送</p> <p class="price">Free</p> </li > <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2"> <p class="name">高级配送</p> <p class="price">180</p> </li> </ul> <!--其中shippingMethod在js里需要定义-->
<p class="md-overlay" v-if="delFlag"></p>
1. Call the backend method
var _this = this; this.$http.get("data/address.json").then(function(response){ _this.addressList = response; //这里不能直接用this 此this非彼this 所以只能声明_this }); //以下为ES6写法,就可以直接用this了 let _this = this; //没用,就放这看看~ this.$http.get("data/cartData.json",{"id":123}).then(res=>{ this.productList = res.data.result.list; });
Loopthis.productList.forEach(function(item,index){
if(typeof item.checked == 'undefined'){
//如果item中没有checked属性 在item对象中添加checked属性,值为true
_this.$set(item,"checked",true);//局部注册
Vue.set(item,"checked",true);//全局注册
}
});
How to use Angular to render on the server side
How to use vue to implement all selection and inverse selection
The above is the detailed content of How to operate vue2 to implement shopping cart and address selection. For more information, please follow other related articles on the PHP Chinese website!