vue2 realizes automatic binding of shopping cart and address
This time I will bring you vue2 to automatically bind the shopping cart and the address. What are the precautions for vue2 to automatically bind the shopping cart and the address. 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= -->1.html reference method
<p class="item-price">{{item.productPrice | money('元')}}</p>2.Filter
filters:{
formatMoney:function(value,type){
return "￥"+value.toFixed(2)+ type;
}
},3. Global filter (written outside new Vue)
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 calculation
are 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>
#vue2’s js syntax is posted for easy reference
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;
});2.forEachLoop
this.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);//全局注册
}
});vue.js element-ui tree control modification iview step-by-step explanation
Angular implementation service Detailed explanation of client rendering case
The above is the detailed content of vue2 realizes automatic binding of shopping cart and address. 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
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
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
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:
Linux Tips: Cancel automatic indentation when pasting in vim
Mar 07, 2024 am 08:30 AM
Preface: vim is a powerful text editing tool, which is very popular on Linux. Recently, I encountered a strange problem when using vim on another server: when I copied and pasted a locally written script into a blank file on the server, automatic indentation occurred. To use a simple example, the script I wrote locally is as follows: aaabbbcccddd. When I copy the above content and paste it into a blank file on the server, what I get is: aabbbcccddd. Obviously, this is what vim does automatically for us. Format indentation. However, this automatic is a bit unintelligent. Record the solution here. Solution: Set the .vimrc configuration file in our home directory, new
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!
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
Automatic thumbnail generation using JavaScript
Jun 16, 2023 pm 12:51 PM
With the development of the Internet, pictures have become an indispensable part of web pages. But as the number of images increases, the loading speed of images has become a very important issue. In order to solve this problem, many websites use thumbnails to display images, but in order to generate thumbnails, we need to use professional image processing tools, which is a very troublesome thing for some non-professionals. Then, using JavaScript to achieve automatic thumbnail generation becomes a good choice. How to use JavaS
Automount drives on Linux
Mar 20, 2024 am 11:30 AM
If you are using a Linux operating system and want the system to automatically mount the drive on boot, you can do this by adding the device's unique identifier (UID) and mount point path to the fstab configuration file. fstab is a file system table file located in the /etc directory. It contains information about the file systems that need to be mounted when the system starts. By editing the fstab file, you can ensure that the required drives are loaded correctly every time the system starts, thus ensuring stable system operation. Automatically mounting drivers can be conveniently used in a variety of situations. For example, I plan to back up my system to an external storage device. To achieve automation, ensure that the device remains connected to the system, even at startup. Likewise, many applications will directly
