Case analysis of shopping cart and address selection using vue2
This time I will bring you a case analysis of vue2's implementation of shopping cart and address selection. What are the precautions for vue2's implementation of 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"
computed real-time The calculation 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);
}
},First put forward one or two classic examples
1. The following is implemented Click to select the loop card
<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}"
@click="currentIndex=index">
<!--其中currentIndex在js里需要定义-->2. The following implements the click to select the fixed card
<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里需要定义-->Digression: Since I am a novice, I will learn a little bit, and I will record the auxiliary pop-up box. How to write the mask layer
<p class="md-overlay" v-if="delFlag"></p>
vue2’s js syntax is posted for easy reference
1. Call the backend methodvar _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;
});
forEachLoopthis.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);//全局注册
}
});
Recommended reading:
Vue implements search list content
##axios sends a post request to submit the image form step-by-step explanation
The above is the detailed content of Case analysis of shopping cart and address selection using vue2. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1421
52
1315
25
1266
29
1239
24
What is the difference between the life cycle execution order in vue2 and vue3
May 16, 2023 pm 09:40 PM
Difference in life cycle execution order between vue2 and vue3 Life cycle comparison The execution order in vue2 beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed The execution order in vue3 setup=>onBeforeMount=>onMounted=> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g
PHP implements shopping cart function
Jun 22, 2023 am 09:00 AM
In our daily lives, online shopping has become a very common way of consumption, and the shopping cart function is also one of the important components of online shopping. So, this article will introduce how to use PHP language to implement shopping cart related functions. 1. Technical background The shopping cart is a common function on online shopping websites. When users browse some products on a website, they can add those items to a virtual shopping cart for easy selection and management during the subsequent checkout process. A shopping cart usually includes the following basic functions: Add items:
How to implement a simple shopping cart function in Java?
Nov 02, 2023 am 11:56 AM
How to implement a simple shopping cart function in Java? The shopping cart is an important feature of an online store, which allows users to add items they want to purchase to the shopping cart and manage the items. In Java, we can implement a simple shopping cart function by using object-oriented approach. First, we need to define a product category. This class contains attributes such as product name, price, and quantity, as well as corresponding Getter and Setter methods. For example: publicclassProduct
Practical tutorial: Detailed explanation of shopping cart function with PHP and MySQL
Mar 15, 2024 pm 12:27 PM
Practical tutorial: Detailed explanation of the shopping cart function with PHP and MySQL. The shopping cart function is one of the common functions in website development. Through the shopping cart, users can easily add the goods they want to buy to the shopping cart, and then proceed with settlement and payment. In this article, we will detail how to implement a simple shopping cart function using PHP and MySQL and provide specific code examples. To create a database and data table, you first need to create a data table in the MySQL database to store product information. The following is a simple data table
How to implement a simple shopping cart function using PHP
Sep 24, 2023 am 09:13 AM
How to use PHP to implement a simple shopping cart function The shopping cart function is an essential part of an e-commerce website. It allows users to add items of interest to the shopping cart, and then proceed to checkout or continue browsing and adding items. This article will introduce how to use PHP to implement a simple shopping cart function and provide specific code examples. Creating the database and tables First, we need to create a database and a table to store the shopping cart data. CREATEDATABASEshopping_ca
How to implement shopping cart function using Redis and JavaScript
Sep 21, 2023 pm 01:27 PM
How to use Redis and JavaScript to implement the shopping cart function. The shopping cart is one of the very common functions in e-commerce websites. It allows users to add items of interest to the shopping cart, making it convenient for users to view and manage purchased items at any time. In this article, we will introduce how to implement the shopping cart function using Redis and JavaScript, and provide specific code examples. 1. Preparation Before starting, we need to ensure that Redis has been installed and configured, which can be done through the official website [https:/
Quickly understand the Vue2 diff algorithm (detailed graphic explanation)
Mar 17, 2023 pm 08:23 PM
The diff algorithm is an efficient algorithm that compares tree nodes at the same level, avoiding the need to search and traverse the tree layer by layer. So how much do you know about the diff algorithm? The following article will give you an in-depth analysis of the diff algorithm of vue2. I hope it will be helpful to you!
How to design the shopping cart table structure of the mall in MySQL?
Oct 30, 2023 pm 02:12 PM
How to design the shopping cart table structure of the mall in MySQL? With the rapid development of e-commerce, shopping carts have become an important part of online malls. The shopping cart is used to save the products purchased by users and related information, providing users with a convenient and fast shopping experience. Designing a reasonable shopping cart table structure in MySQL can help developers store and manage shopping cart data effectively. This article will introduce how to design the shopping cart table structure of the mall in MySQL and provide some specific code examples. First, the shopping cart table should contain
