<template><div><table width=800 style="text-align: center; margin: 0 auto;" border=1><caption>欢迎光临开发的收银系统_水果店</caption><tr><th>苹果 {{price}} ¥ / 斤, 折扣 &lt; {{dis}}折 &gt;</th></tr><tr><!-- .number如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： --><td>请输入你要购买的斤数 <input type="number" v-model="count" placeholder="斤数"></td></tr><tr><td><button @click="celFn">结账买单~</button></td></tr><tr><td>结账单:<span>总价: {{ allPrice}} ¥元</span><span>折后价: {{disPrice}} ¥元</span><span>省了: {{savePrice}} ¥元</span></td></tr></table></div>
</template>

// 总结:
// 1. 明确需求, html+css
// 2. 数据准备好变量, 用到页面上
// 3. 点击事件交互效果
// 4. 实现计算过程

<script>
export default {data(){return{price: 10, // 单价dis: 0.8, // 折扣count: 0, // 斤数allPrice: 0, // 总价disPrice: 0, // 折扣价savePrice: 0 // 省了多钱}},methods: {celFn(){this.allPrice = this.price * this.count;this.disPrice = this.allPrice * this.dis;this.savePrice = this.allPrice - this.disPrice;console.log(this.allPrice);console.log(this.disPrice);console.log(this.savePrice);}}
}
</script><style lang="less" scoped></style>