代码
提交代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>商品数量:{{count}} 个</h1> <h1>商品单价:{{unitPrice}} 元</h1> <h1>商品总价:{{totalPrice}} 元</h1> <button @click="changePrice">修改单价</button> <button @click="changeCount">修改数量</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { count: 10, unitPrice: 24 }, computed: { totalPrice() { return this.count * this.unitPrice } }, methods: { changePrice() { vm.unitPrice = vm.unitPrice + 1 }, changeCount() { vm.count = vm.count + 1 } } }) </script> </html>
运行结果