Vue学习记录-计算属性

最新推荐文章于 2025-02-03 22:30:37 发布

原创最新推荐文章于 2025-02-03 22:30:37 发布 · 157 阅读

CC 4.0 BY-SA版权

<body>
  <div id="app">
    <h2>{{firstName+' '+lastName}}</h2>
    <h2>{{getfullName()}}</h2>
    <h2>{{fullName}}</h2>
    <h2>总价格:{{totalPrice}}</h2>
  </div>
  <script src="js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          firstName: 'cloud',
          lastName: 'aireth',
          books: [
            {id: 10,name:'san1',price: 100},
            {id: 11,name:'san1',price: 110},
            {id: 12,name:'san1',price: 101},
            {id: 13,name:'san1',price: 92}
          ]
        },
        //计算属性
        computed: {
          fullName(){
            return this.firstName + ' ' + this.lastName;
          },
          totalPrice(){
            let result = 0;
            for(let book of this. books){
              result += book.price;
            }
            return result;
          }
        },
        methods:{
          getfullName(){
            return this.firstName + ' ' + this.lastName;
          }
        }
     })
  </script>
</body>