计算属性--Vue学习第一天

Auspicious_Sunny

已于 2022-10-12 21:31:03 修改

阅读量160

点赞数

分类专栏： vue 文章标签： vue

于 2022-10-12 21:28:04 首次发布

本文链接：https://blog.csdn.net/weixin_45261174/article/details/127291205

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>

   <div id="app">
           <h2>总价格：{{totalprice}}</h2>

       </div>
       <script src='../js/vue.js'></script>
       <script>
           const app = new Vue({
               el:'#app',
               data:{
                   books:[
                       {id:1,name:'数据结构',price:22},
                       {id:2,name:'操作系统',price:23},
                       {id:3,name:'计算机组成原理',price:20},
                       {id:4,name:'计算机网络',price:28}
                   ]
               },
               computed:{
                   totalprice:function(){
                       let result = 0;
                       for(let i=0;i<this.books.length;i++){
                           result += this.books[i].price
                       }
                       return result
                   }
               }
           })
       </script>

   </body>
</html>

Auspicious_Sunny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
计算属性--Vue学习第一天

{id:3,name:'计算机组成原理',price:20},{id:1,name:'数据结构',price:22},{id:2,name:'操作系统',price:23},{id:4,name:'计算机网络',price:28}总价格：{{totalprice}}
复制链接

扫一扫

专栏目录