Begin to learn Vue Little white of ,dalao A lot of correct

Want to implement the following interface , Including total price calculation 、 Number of add and remove features

The code is as follows

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> Small shopping cart </title>
</head>
<body>
<div id="app">
<table border="2">
<thead>
<td> Book name </td>
<td> Book name </td>
<td> Publication date </td>
<td> Price </td>
<td> Purchase quantity </td>
<td> operation </td>
</thead>
<tbody>
<tr v-for="(item,index) in books" >
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="removeBook(index)"> remove </button>
</td>
</tr>
</tbody> </table>
<font> The total price :{{toltalPrice | showPrice}}</font> </div>
<script src="./js/vue.js"></script>
<script>
const hello = new Vue({
el:'#app',
data:{
message:'Hello Vue !',
books :[
{
id:1,
name:' Programming Dafa ',
date:'2020-5',
price:999.00,
count:1
},
{
id:2,
name:' Programming Dafa ',
date:'2020-5',
price:999.00,
count:1
},
{
id:3,
name:' Programming Dafa ',
date:'2020-5',
price:999.00,
count:1
},
{
id:4,
name:' Programming Dafa ',
date:'2020-5',
price:999.00,
count:1
}
] },
filters: {
showPrice(price) {
return '¥'+price.toFixed(2);
}
},
methods:{
decrement(index){
this.books[index].count--;
},
increment(index){
this.books[index].count++;
},
removeBook(index){
this.books.splice(index,1);
} },
computed:{
toltalPrice(){
let toltalPrice=0;
for(let i=0;i<this.books.length;i++){
toltalPrice += this.books[i].price * this.books[i].count;
}
return toltalPrice;
}
} })
</script>
</body>
</html>

v-for: It used to be native javascript When writing the interface, you need to create a list in html Write more than one <tr></tr>、<td></td>、<th></th> label , Make the code redundant , This is one of the advantages of the framework .

 <tr v-for="(item,index) in books" >
This way of writing makes item(books The items of the array are traversed one by one ),index Will record array subscripts

computed and methods

This is also one of the more ingenious places : Although the contents of both can be written as functions , But the difference is computed The functions in are executed once when the page is loaded and the contents are saved in memory , You don't have to call the function again the next time you use it , It's better to take it out of memory methods Functions in save memory , Improve performance , For frequently used functions, write in computed Inside , In addition, when it's written in the label ,computed All you need to do is write the function name ,methods You need to write brackets in . however computed It takes up memory , So infrequent calls can be written in methods Inside .computed Be similar to Vue Properties in , When the calculation results change , The results will change dynamically

utilize Vue To achieve a simple shopping cart features more related articles

  1. utilize JSP Programming technology to achieve a simple shopping cart program

    Experiment two    JSP Programming One . The experiment purpose 1.  master JSP How to use instructions :2.  master JSP How to use actions :3.  master JSP How to use built-in objects :4.  master JavaBean Programming technology and using method of PLC :5.  master JSP ...

  2. Use MongoDB and JSP Implement a simple shopping cart system

    Catalog 1 Problem description   2 Solution   2.1   Realization function   2.2   The final operation effect picture   2.3   System function frame diagram   2.4   of MongoDB Introduction and system environment configuration   2.5   Core function code explanation   ...

  3. utilize ANTLR4 Implementation of a simple four arithmetic calculator

    utilize ANTLR4 Implementation of a simple four arithmetic calculator ANTLR4 Introduce ANTLR Can automatically help you complete the work of lexical analysis and grammar analysis , It avoids the trouble of writing lexical analyzer and parser by hand It is based on LL(k) Of , Drop recursively ...

  4. utilize jmeter Do a simple performance test and parameterize it

    1. Add a thread group , And add the basic original below , Include : Monitor .http Request the default value and a transaction controller stay http Fill in the default value of the request ip Address and port number , The default protocol type is http 2. Add proxy server , For recording later ...

  5. utilize nodeJS Build a simple Web The server ( turn )

    The following code demonstrates how to use  nodeJS Build a simple Web The server : 1.  file WebServer.js: //-------------------------------------------- ...

  6. JS event Programming practice - Homemade calculator Use JS Complete a simple calculator function . Realization 2 After entering an integer in the first input box , Click on the third input box to give 2 The addition, subtraction, multiplication and division of an integer .

    Programming practice Use JS Complete a simple calculator function . Realization 2 After entering an integer in the first input box , Click on the third input box to give 2 The addition, subtraction, multiplication and division of an integer . Tips : Get the value setting and getting method of the element as : example : assignment :document.getElement ...

  7. Java The strategic model in , Complete a simple shopping cart , Examples of two payment strategies

    Strategy model is a behavior pattern . For a specific project, there are multiple algorithm strategies to choose from , When the client is running, it decides to use a specific algorithm strategy according to different requirements . The strategic model is also called the policy model . The implementation process is , First, define different algorithm strategies , And then the client puts ...

  8. use Vue Do a simple shopping app

    Preface Studying recently Vue Use . After reading the official documents , It's very interesting . So I started a simple shopping app.h5 With native app The principle of interaction this is the first time I write about sharing on this website , If there is anything improper , Your advice are most welcome . A whole project ...

  9. utilize java Realize a simple remote monitoring program

    General remote monitoring software uses c perhaps c++ Wait for language development , While using java How to achieve the same function . First of all, let's introduce the implementation principle of a simple remote monitoring program . Function one , Remote screen monitoring (1) There must be monitoring end and monitored end , ...

  10. utilize VS2008 Release a simple webservice

    A well developed webservice, How to publish , For other computers to access ? This article will show you how to publish a simple webservice, The content is to check other people's articles on the Internet , I imitated it , therefore , Mistakes are inevitable , If you send ...

Random recommendation

  1. Realize Ctrip X We had a reservation about minutes ago

    Realize Ctrip X We had a reservation about minutes ago principle : utilize cookie And timer : First , Enter the page ,x It's assigned to a random number , After the assignment x It'll take a minute to add 1, Until added 60, Again from 1 Start accumulating . Whether the page is the same or not depends on the page url After id Value judgment ...

  2. Docker Installation and deployment

    Docker Learning notes One .Ubuntu Docker install (1). Get the latest version Docker Installation package lyn@lyn:/data/docker$ sudo wget -qO- https://get.d ...

  3. gomoblie flappy Source code analysis : The game logic

    This paper mainly discusses the logic of game rules , Please refer to related articles for specific rendering techniques : gomoblie flappy Source code analysis : Image material and size processing http://www.cnblogs.com/ghj1976/p/5222289 ...

  4. SQL2008R2 Unable to read the list of previously registered servers on this system -- The online approach doesn't work

    C:\Users\<username>\AppData\Local\Temp, Then create two named 1 and 2 Folder

  5. 1819: [JSOI]Word Query Electronic dictionary

    1819: [JSOI]Word Query Electronic dictionary Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 729  Solved: 238[Submit][S ...

  6. C# Post Submit data

    /// <summary> /// Post Submit data /// </summary> /// <param name="postUrl">URL& ...

  7. An array of unsorted integers , There are positive and negative numbers , Rearrange negative numbers in front of positive ones , And it is required not to change the relative order between the original positive and negative numbers , such as : input: 1,7,-5,9,-12,15 ans: -5,-12,1,7,9,15 When required

    #include <iostream> using namespace std; void txsort(int* arr, int len) { if (!arr || len == 1 ...

  8. Heap and some usage QWQ This is the most serious board problem

    I've been studying graph theory recently , Then , Because there are too many things to learn , In addition, konjac often decays , So I left a lot of questions on the board, but I didn't write them , But I've learned all these things , One more piece of writing , Actually, it's not bad ????? It's amazing ...

  9. JavaScript I learned seven

    This is the course notes of teacher Jin Xuliang's Netease cloud class , recorded , As a reminder . An array is “ Polymorphic array " , You can put anything //JavaScript Polymorphic arrays in var arr = ["one", 2 ...

  10. s6-7 TCP Transport policy

    TCP Transport policy Prevent the appearance of sticking package When the number of windows is 0 when , The sender cannot send the data segment normally , Unless : -Urgent data . such as , When a user wants to kill a process on a remote machine , Can send data - The sender can send a byte of data segment , ...