计算属性computed（一）

最新推荐文章于 2024-04-30 13:27:35 发布

DjangoandPython

最新推荐文章于 2024-04-30 13:27:35 发布

阅读量152

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/DjangoandPython/article/details/109828327

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、基本使用

<body>
  <div id="app">
<!--    使用函数定义进行字符串拼接-->
    <h2>{{getFullName()}}</h2>
<!--使用计算属性进行字符串拼接，无需添加小括号-->
    <h2>{{fullName}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'sun',
        lastName: 'bo'
      },
      // 计算属性，起名字尽量不要动词，属性名词
      computed: {
        fullName:function(){
          return this.firstName + " " + this.lastName
        }
      },
      //
      methods:{
        getFullName(){
          return this.firstName + " " + this.lastName
        }
      }
    })
  </script>
</body>

二、一些复杂操作

<body>
  <div id="app">
<!--    显示所有书的总价格-->
    <h2>总价格：{{totalPrice}}</h2>
  </div>


  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        books: [
          {id: 110, name: 'Unix编程艺术', price:118},
          {id: 111, name: '深入理解计算机原理', price:114},
          {id: 112, name: 'Unix编程艺12', price:119},
          {id: 113, name: 'Unix编45术', price:112},
        ]
      },
      // 计算属性
      computed: {
        // 使用计算属性对data数据进行汇总，然后在 html 模板中进行调用
        totalPrice: function(){
          let result = 0;
          // ES5 语法循环
          // for ( let i=0; i<this.books.length; i++){
          //   result += this.books[i].price
          // }
          // ES6 循环 1 获取的是下标
          // for (i in this.books){
          //   result += this.books[i].price
          // }

          // ES6 循环2 可以直接获取数组里面的元素 ！！
          for (book of this.books){
            result += book.price
          }
          return result
        }
      },
    })
  </script>
</body>

DjangoandPython

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性computed（一）

一、基本使用<body> <div id="app"> <h2>{{getFullName()}}</h2> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script&gt
复制链接

扫一扫

专栏目录