计算属性和监听器
<body>
<div id="app">
<ul>
<li v-for="(item, index) in car" :key="index">品牌：{{item.name}}-----价格：{{item.price}}-------数量：{{item.count}}
<input type="text" v-model="item.count">
----------------剩余库存：{{item.stock}}
</li>
<p v-html="warn()"></p>
</ul>
<h1>总价格：{{totalPrice}}</h1>{{carsum}}
</div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vue = new Vue({
el: app,
data() {
return {
car: [
{ name: "奔驰", price: 100, count: 12, stock: 100 },
{ name: "宝马", price: 200, count: 31, stock: 100 },
{ name: "奥迪", price: 300, count: 21, stock: 100 },
{ name: "特斯拉", price: 400, count: 5, stock: 100 },
{ name: "五菱宏光", price: 500, count: 10, stock: 100 },
],
totalPrice: 0,//总价格
}
},
methods: {
//warn
warn() {
let msg = "";
this.car.forEach(item => {
if (item.count > item.stock) {
msg += item.name + "库存不足" + "<br>";
}
})
return msg;
}
},
computed: {
// 计算属性,只会调用一次，当依赖的值发生变化时，才会重新计算
// 计算属性会缓存，当依赖的值没有发生变化时，不会重新计算
carsum() {
let sum = 0;
this.car.forEach(item => {
sum += item.price * item.count;
this.totalPrice = sum;
})
}
},
// 监听器,当监听的值发生变化时，会调用handler函数
watch: {
car: {
handler(newValue, oldValue) {
newcar = [
{ name: "奔驰", price: 100, count: 12, stock: 100 },
{ name: "宝马", price: 200, count: 31, stock: 100 },
{ name: "奥迪", price: 300, count: 21, stock: 100 },
{ name: "特斯拉", price: 400, count: 5, stock: 100 },
{ name: "五菱宏光", price: 500, count: 10, stock: 100 },
]
oldcar = [{ name: "奔驰", price: 100, count: 12, stock: 100 },
{ name: "宝马", price: 200, count: 31, stock: 100 },
{ name: "奥迪", price: 300, count: 21, stock: 100 },
{ name: "特斯拉", price: 400, count: 5, stock: 100 },
{ name: "五菱宏光", price: 500, count: 10, stock: 100 },]
newValue.forEach((item, index) => {
if (item.count > oldcar[index].stock) {
item.count = oldcar[index].stock;
newcar[index].count = oldcar[index].stock;
}
})
this.car.forEach((item, index) => {
item.stock = newcar[index].stock - item.count;
})
},
deep: true
}
}
})
</script>
浙公网安备 33010602011771号