基于vue的购物车数量变动监控显示总价效果
代码语言:html
所属分类:布局界面
代码描述:基于vue的购物车数量变动监控显示总价效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script> <title>Vue.js监听购物车</title> </head> <style> table { border: 1px solid #ddd; border-right: none; border-bottom: none; } table { width: 100%; } th, td { height: 36px; line-height: 36px; padding: 0px; margin: 0px; border-bottom: 1px solid #ddd; text-align: center; border-right: 1px solid #ddd; } </style> <body> <div> <pre>Vue.js测试监听购物车数量变化</pre> </div> <div id="shopcart"> <table> <thead> <tr> <th v-for="thead in name">{{thead.a}}</th> </tr> </thead> <tbody> <tr v-for="info in shop_info"> <td>{{info.id}}</td> <td>{{info.name}}</td> <td>{{info.price}}</td> <td> <button v-bind:disabled="info.count === 0" v-on:click="info.count-=1">-</button> {{info.count}} <button v-on:click="info.count+=1">+</button> </td> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0