computed计算属性.html 878 B

123456789101112131415161718192021222324252627282930313233
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <title>计算属性</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. <link href="../css/style.css" rel="stylesheet"> </head>
  9. <body>
  10. <div id="myApp">
  11. 今年3月3日发卖的任天堂新一代主机Switch的价格是:{{price}}円,含税价格为:{{priceInTax}}円,折合人民币为:{{priceChinaRMB}}元。
  12. </div>
  13. <script>
  14. var myApp = new Vue({
  15. el: '#myApp',
  16. data: {
  17. price: 29980
  18. },
  19. computed: {
  20. priceInTax: function(){
  21. return this.price * 1.08;
  22. },
  23. priceChinaRMB: function(){
  24. return Math.round(this.priceInTax / 16.75);
  25. },
  26. },
  27. });
  28. </script>
  29. </body>
  30. </html>