zoukankan      html  css  js  c++  java
  • vue computed

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
      </head>
      <body>
        <div id="app">
          <p>{{ message }}</p>
          <p>{{ totalPrice }}</p>
        </div>
    
        <script>
          new Vue({
            el: '#app',
            data: {
              message: 'Hello Vue.js!',
              books: [{
                  id: 1,
                  name: 'HTML/HTML5基础',
                  price: 58
                },
                {
                  id: 2,
                  name: '高健壮性CSS',
                  price: 68
                },
                {
                  id: 3,
                  name: '深入学习JS',
                  price: 78
                }
              ]
            },
            computed: {
              totalPrice: function() {
                let result = 0;
                for (let i = 0; i < this.books.length; i++) {
                  result += this.books[i].price;
                }
    
                return result;
              },
    
              totalPrice: function() {
                let result = 0;
                for (let i in this.books) {
                  result += this.books[i].price;
                }
    
                return result;
              },
            }
          })
        </script>
      </body>
    </html>
    

  • 相关阅读:
    买不到的数目
    逆波兰表达式
    颠倒的价牌
    排它平方数
    寒假作业
    搭积木
    网友年龄
    九宫重排
    格子刷油漆
    高僧斗法
  • 原文地址:https://www.cnblogs.com/zhangxuechao/p/14957732.html
Copyright © 2011-2022 走看看