<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <style type="text/css"> li.selected{ border: 1px solid; } /*斗篷*/ [v-cloak]{ display: none; } </style> <body > <div id="app" v-cloak> <ul> <li @click="click_me(k)" v-for="(v,k) in books" :style="{color:v.color,fontSize:v.size}" class="demo" :class="{selected:v.is_selected}"> {{ v.name }}</li> </ul> <div>总价{{ total_price }}</div> </div> </body> <script type="text/javascript"> const app = new Vue({ el : "#app", data : { books : [ {name:'22',price:33,size:18,color:"blue",is_selected:false}, {name:33,price:12,size:14,color:"red",is_selected:false} ] }, methods : { click_me : function (k) { this.books[k].is_selected = !this.books[k].is_selected; }, }, // 计算属性 computed : { total_price : function(){ var total_price = 0; for(var i in this.books){ total_price += this.books[i].price; } return total_price; } } }) </script> </html>