<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示计算属性</title>
</head>
<body>
    <div id="app">
        <h2>图书</h2>
        <div>
            你购买了{{book.name}}共{{book.count}}本==={{book.price}}/本
        </div>
        <div>
            总价：{{totalPrice}}(折扣{{discount}},邮费{{deliver}})
        </div>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                book:{id:1,price:10,name:'vue入门',count:1},
                discount:0.8,
                deliver:12
            },
            computed:{
                totalPrice(){
                    return (this.book.price * this.book.count) * this.discount + this.deliver;
                }
            }
        });
    </script>
</body>
</html>