Detailed explanation of the steps to implement shopping cart and address selection in vue2-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of the steps to implement shopping cart and address selection in vue2

php中世界最好的语言

Apr 27, 2018 pm 04:59 PM

vue2 shopping cart

This time I will bring you a detailed explanation of the steps to implement shopping cart and address selection in vue2. What are the precautions for implementing the shopping cart and address selection steps in vue2. 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:{
  }
});

Copy after login

v-for

<li v-for="(item,index) in productList">
  <p class="item-name">{{item.productName}}</p>
</li>

Copy after login

v-model

(Real-time update)

1 2	`<input type="text"` `value="0"` `disabled v-model="item.productQuantity">` `<p` `class="item-price-total">{{item.productQuantity}}</p>`

Copy after login

v-bind

<a href="javascript:;" class="item-check-btn" v-bind:class="{&#39;check&#39;:item.checked}">
<!--可通过更改item.checked的值设置是否选中-->
<!--必须用v-bind 不可直接在class里面直接使用{{}}-->
<!--v-bind:class= 可简写为 :class= -->

Copy after login

filtersUse of filters

1.html reference method

1	`<p` `class="item-price">{{item.productPrice \| money('元')}}</p>`

Copy after login

2.Filter

filters:{
  formatMoney:function(value,type){
    return "￥"+value.toFixed(2)+ type;
  }
},

Copy after login

3. Global filter (written outside new Vue)

Vue.filter("money",function(value,type){
  return "￥"+value.toFixed(2) + type; //保留两位小数 结果eg:￥19.00元
});

Copy after login

Call the method in methods:

@click="method(param)"
//或者
@click="delFlag=false"
@click="limitNum=addressList.length"

Copy after login

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);
  }
},

Copy after login

Let’s first put forward one or two classic examples

1. The following implements the click selection of the loop card

<li v-for="(item,index) in filterAddress" v-bind:class="{&#39;check&#39;:index==currentIndex}"
@click="currentIndex=index">
<!--其中currentIndex在js里需要定义-->

Copy after login

2. The following implements the click selection of the fixed card

<ul>
  <li v-bind:class="{&#39;check&#39;:shippingMethod==1}" @click="shippingMethod=1">
   <p class="name">标准配送</p>
   <p class="price">Free</p>
  </li >
  <li v-bind:class="{&#39;check&#39;:shippingMethod==2}" @click="shippingMethod=2">
   <p class="name">高级配送</p>
   <p class="price">180</p>
  </li>
 </ul>
 <!--其中shippingMethod在js里需要定义-->

Copy after login

Digression: Since I am a novice, I will learn a little bit, and I will also record the writing method of the auxiliary pop-up box mask layer

1	`<p` `class="md-overlay"` `v-if="delFlag"></p>`

Copy after login

#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;
});

Copy after login

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);//全局注册
  }
});

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to 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

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

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

Where is the login entrance for gmail email?

7316

Java Tutorial

1625

CakePHP Tutorial

1349

Laravel Tutorial

1261

PHP Tutorial

1208

Related knowledge

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:

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!

PHP mall development skills: Design shopping cart and order synchronization functions Jul 30, 2023 pm 07:22 PM

PHP mall development skills: Design shopping cart and order synchronization functions In a mall website, shopping cart and orders are indispensable functions. The shopping cart is used for users to purchase products and save them to a temporary shopping cart, while the order is a record generated after the user confirms the purchase of the product. In order to improve user experience and reduce errors, it is very important to design a shopping cart and order synchronization function. 1. The Concept of Shopping Cart and Order A shopping cart is usually a temporary container used to store items purchased by users. Users can add products to the shopping cart for easy browsing and management.

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:/

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

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

See all articles