<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示methods</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
            },
            methods:{
                //计算属性的结果，是可以缓存的。methods函数是每次都执行的。效率不同。
                totalPrice:function () {
                    return (this.book.price * this.book.count) * this.discount + this.deliver;
                }
            }
        })

    </script>
</body>
</html>