作者：mobiledu2502916503 | 来源：互联网 | 2023-09-15 02:04
1.引入vue.js
<script src="js/vue.js" type="text/Javascript" charset="utf-8"></script><script src="js/vue.min.js" type="text/Javascript" charset="utf-8"></script>
2.完整代码（不解释那么多，不懂自己领悟去）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/Javascript" charset="utf-8"></script><script src="js/vue.min.js" type="text/Javascript" charset="utf-8"></script><style type="text/css">table{border:1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;
}th,td{padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;
}th{background-color: #f7f7f7;color:#5c6b77;font-weight: 600;
}
.image{width: 100px;
}</style></head><body><div id="app"><div v-if="boolist.length>0"><table border="" cellspacing="" cellpadding=""><tr><td></td><!-- <td>全选<input type="checkbox" name="" id="" value="" /></td> --><td>商品名</td><td>图片</td><td>时间</td><td>价格</td><td>购买数量</td><td>删除</td></tr><tr v-for="(a,i) in boolist"><td>{{a.id}}</td><td>{{a.name}}</td><td><img v-bind:src="a.image" v-bind:class="{image:a.images}" width="50px" @mouseenter="enter(i)" @mouseleave="leave(i)" /></td><td>{{a.data}}</td><td>￥：{{a.price}}</td><td><button type="button" @click="aa(i)">+</button><input type="text" style="width: 10px;" v-model="a.count" /><button type="button" @click="ab(i)">-</button></td><td><button type="button" @click="ac(i)">删除</button></td></tr></table><p>总价格：{{aas}}</p></div><div v-else>没有商品了</div></div></body><script type="text/Javascript" >let a = new Vue({el: "#app",data: {boolist: [{id: 1,images: false,"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",name: &＃39;Vue.js实战&＃39;,data: &＃39;2015-11-19&＃39;,price: 35,count: 1},{id: 2,images: false,"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",name: &＃39;Vue.js实战&＃39;,data: &＃39;2014-03-21&＃39;,price: 45,count: 1},{id: 3,images: false,"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",name: &＃39;Vue.js实战&＃39;,data: &＃39;2012-05-03&＃39;,price: 85.23,count: 1},{id: 4,images: false,"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",name: &＃39;Vue.js实战&＃39;,data: &＃39;2016-01-01&＃39;,price: 73,count: 1},{id: 5,images: false,"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",name: &＃39;Vue.js实战&＃39;,data: &＃39;2017-08-15&＃39;,price: 15,count: 1}]},methods: {aa: function(i) {this.boolist[i].count++;},ab: function(i) {if (this.boolist[i].count <= 0) {alert("已经没有商品了哦");} else {this.boolist[i].count--;}},ac: function(s) {this.boolist.splice(s, 1);},enter: function(s) {this.boolist[s].images = true;},leave: function(s) {this.boolist[s].images = false;}},computed: {aas: function() {let ss = 0;for (let j = 0; j < this.boolist.length; j++) {ss += this.boolist[j].price * this.boolist[j].count;}return ss.toFixed(2);}}})</script>
</html>
3.实现图片
京公网安备 11010802041100号