Vue computed 计算属性

最新推荐文章于 2022-11-21 11:36:56 发布

终不似、少年游

最新推荐文章于 2022-11-21 11:36:56 发布

阅读量94

点赞数 1

分类专栏： web前端学习笔记文章标签： vue javascript css html

本文链接：https://blog.csdn.net/qq_45780380/article/details/114300357

版权

web前端学习笔记专栏收录该内容

61 篇文章 2 订阅

订阅专栏

Vue computed 计算属性

有的时候我们在html元素中数据并不是我们直接想要的，需要对数据进行处理，但是直接在html中拼写的话比较麻烦，而且很容易影响美观，这个时候就需要computed属性

代码如下

<body>
<div id="app">
  <h2>总价格{{totalPrice}}</h2>
</div>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      books:[
        {id:110,name:'unix编程艺术',price:119},
        {id:111,name:'代码大全',price:105},
        {id:112,name:'深入理解计算机系统',price:98},
        {id:113,name:'现代操作系统',price:87},
      ]
    },
    computed:{
      totalPrice:function (){
        let result=0;
        for(let i=0;i<this.books.length;i++){
          result +=this.books[i].price
        }
        return result;
      }
    }
  })
</script>
</body>

效果图
在这里插入图片描述

终不似、少年游

关注

1
点赞
踩
0

收藏

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

Vue computed 计算属性有的时候我们在html元素中数据并不是我们直接想要的，需要对数据进行处理，但是直接在html中拼写的话比较麻烦，而且很容易影响美观，这个时候就需要computed属性代码如下<body><div id="app"> <h2>总价格{{totalPrice}}</h2></div><script> const app=new Vue({ el:"#app", data:
复制链接

扫一扫

专栏目录