1、效果
2、index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="app"> <!--<h2>{{title}}</h2>--> <li v-for="(item,index) in productList"> <div >产品名称：{{item.productName}}</div> <a href="javascript:;" class="item-edit-btn" @click="delConfirm(item);">删除</a> </li> <!--删除弹框"--> <!--:class="{'md-show',delFlag}"这里注意，绑定class时，class和bool值中间是冒号，不是逗号--> <div class="md-modal modal-msg md-modal-transition" :class="{'md-show':delFlag}"> <div class="md-modal-inner"> <div class="md-top"> <button class="md-close" @click="delFlag=false">关闭</button> </div> <div class="md-content"> <div class="confirm-tips"> <p id="cusLanInfo">你确认删除此订单信息吗?</p> </div> <div class="btn-wrap col-2"> <button class="btn btn--m" id="btnModalConfirm" @click="delProduct();">Yes</button> <button class="btn btn--m btn--red" id="btnModalCancel" @click="delFlag=false">No</button> </div> </div> </div> </div> <div class="md-overlay" v-if="delFlag"></div> </div> <script src="js/lib/vue.min.js"></script> <script src="js/lib/vue-resource.min.js"></script> <script src="js/cart.js"></script> </body> </html>
3、index.css
img { width: 50px; } a { font-size: 30px; color: #000; text-decoration: none; } .check{ background: #EE7A23; border-color: #EE7A23; } .item-check-btn { display: inline-block; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; text-align: center; vertical-align: middle; cursor: pointer; } .md-modal-transition .md-modal-inner { background: #fff; } .md-modal { position: fixed; top: 50%; left: 50%; width: 535px; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); visibility: hidden; z-index: 201; } .md-show { visibility: visible; } .md-modal-transition .md-modal-inner { background: #fff; -webkit-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .md-modal .md-modal-inner { padding: 60px 50px; } .md-modal-transition.md-show .md-modal-inner { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } .md-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; }
4、cart.js
/** * Created by kk on 2017/4/16. */ new Vue({ el:"#app", data:{ // title:"hello vue" totalMoney:0, productList:[], checkAllFlag:false, totalCheckMoney:0, delFlag:false, curProduct:'' }, filters:{ formatMoney:function (value) { return "￥"+value.toFixed(2) } }, mounted:function () { //类似于jquery中的ready方法 this.$nextTick(function () { this.cartView(); }) }, methods:{ delConfirm:function (item) { this.delFlag=true; this.curProduct=item; }, delProduct:function () { var index=this.productList.indexOf(this.curProduct); this.productList.splice(index,1); this.delFlag=false; } } }); Vue.filter("money",function (value,type) { return "￥"+value.toFixed(2)+type; });