<! DOCTYPEHTML> <HTMLlang="en"> <Head> <Metacharset="UTF-8"> <title>title</title> <Linkrel="stylesheet"href="Http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <Scriptsrc="Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></Script> <Scriptsrc="Http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></Script> <Scriptsrc="Js/vue.js"></Script> <style>.Box{width: 1000px;margin:Auto;Margin-top: 100px; } </style> </Head> <Body> <Divclass="box"id="App"> <H3> Here is <b>{{name}}</b> Shopping Cart </H3> <Div> <span> Input Keywords </span> <inputtype="Text"v-model="Key"> </Div> <Tableclass="Table Table-hover table-striped"> <TR> <th> Product ID </th> <th> Product Name </th> <th> Commodity price </th> <th> Number of Goods </th> <th> Subtotal Amount </th> <th> Delete </th> </TR> <TRv-for="(B,index) in filtergoodses" class="Warning"> <TD>{{index}}</TD> <TD>{{b.goodsname}}</TD> <TD>{{b.price}}</TD> <TD><inputtype="Text"v-model="B.number"></TD> <TD>{{b.price*b.number}}</TD> <TD><Buttonclass="BTN"v-on: click="Dele (Index)"> Delete </Button></TD> </TR> </Table> <Div> Total Price is <span>{{moneyall}}</span></Div> </Div> </Body> <Script>varapp=NewVue ({El:"#app",Data:{ Money:"",name:"Ming Hin Phoenix",goodses:[
{ID: 1,Goodsname:"JavaScript from the start of the abort", Price: 25.5, Number: 1}, {ID: 2,Goodsname:"Java from the beginning of vomiting", Price: 12, Number: 1}, {ID: 3,Goodsname:"PHP is the best language in the world", Price: 18, Number: 1}, {ID: 4,Goodsname:"MySQL from getting started to deleting libraries", Price: 21, Number: 1}, {ID75AGoodsname:"html from Getting started to mastering", Price: 9, Number: 1}],Key:""Create an empty},Methods: {//delete information dele:function(index)
The {/* *confirm () method is used to display a dialog box with the specified message and OK and Cancel buttons.
* If the user clicks the OK button, confirm () returns TRUE.
* If you click the Cancel button, confirm () returns false. * * Click OK to execute the next line of code */if(Confirm ("OK to delete it." ")){ This.goodses. Splice (index,1); }
}
},computed: {//Calculate Total Price Moneyall:function(){varAllp=0; for(vari=0;i< This.goodses. length;i++) {allp=allp+ This.goodses[i]. Price* This.goodses[i]. Number; }returnALLP; }, Filtergoodses:function() {//filtervarKey = This. Key;varGoodses = This.goodses;returnGoodses.filter (function(Goodses,goodsname) {returnGoodses.Goodsname. toLowerCase (). IndexOf (Key.tolowercase ())! =-1/* The *indexof () method is case-sensitive.
* If the string value you want to retrieve does not appear, the method returns a 1 * * toLowerCase () method to convert the string to lowercase.
* */
})
}
}
}); </Script> </HTML>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
