vue计算属性computed基本用法

深碍√TFBOYSˉ_ 2023-01-10 05:04 161阅读 0赞

## 计算属性computed案例： ##

结果截图：  
![在这里插入图片描述][20210123165928482.jpg_pic_center]  
`html代码如下：`

<div id="app">
        <div>
            <h1>总价格：{ { totalPrice}}</h1>
        </div>
    </div>

`scirpt核心代码如下：`

<script src="../Vue_js/vue.js"></script>
    <script>
        const app = new Vue ({ 
            el: '#app',
            data: { 
                books: [
                    { id: 110, name:'C语言程序设计', price: 119},
                    { id: 112, name:'C语言程序设计', price: 456},
                    { id: 113, name:'C语言程序设计', price: 133},
                    { id: 115, name:'C语言程序设计', price: 120},
                ]
            },
            computed: { 
                totalPrice: function () { 
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) { 
                        result += this.books[i].price
                    }
                    return result;
                }
            },
        })
    </script>

[20210123165928482.jpg_pic_center]: /images/20221119/f0e5362abf344e3b8133f813518dae23.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue计算属性之：computed属性中的get与set用法

et：设置值时触发。 get：获取值时触发，与set是没有必然联系的。 <html> <head> <meta http-equiv="Con...

r囧r小猫/ 2024年04月18日 18:42/ 0 赞/ 78 阅读

相关 vue计算属性computed基本用法

计算属性computed案例：结果截图： ![在这里插入图片描述][20210123165928482.jpg_pic_center] `html代码如下：`

深碍√TFBOYSˉ_/ 2023年01月10日 05:04/ 0 赞/ 162 阅读

相关 Vue 计算属性 Computed

基础布局 <div id="example"> <p>Original message: "{ { message }}"</p> <p>Co

喜欢ヅ旅行/ 2022年12月05日 10:19/ 0 赞/ 234 阅读

相关 vue计算属性computed

computed属性计算 new Vue({ el:"", data:{ }, methods:{ }, watch:{

谁借莪１个温暖的怀抱￠/ 2022年11月29日 12:15/ 0 赞/ 230 阅读

相关 Vue.js——计算属性(computed)(七)

计算属性什么是计算属性？我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或

野性酷女/ 2022年11月19日 11:28/ 0 赞/ 270 阅读

相关 vue-计算属性computed

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

深藏阁楼爱情的钟/ 2022年07月12日 14:55/ 0 赞/ 246 阅读

相关深入理解 Vue Computed 计算属性

Computed 计算属性是 Vue 中常用的一个功能，但你理解它是怎么工作的吗？拿官网简单的例子来看一下： <div id="example"> <

电玩女神/ 2022年05月27日 13:27/ 0 赞/ 267 阅读

相关 Vue 框架-04-计算属性 computed

Vue 框架-04-计算属性计算属性是什么？大家可以去看官网解释：[计算属性和侦听器][Link 1] 今天的第一个小实例： ![在这里插入图片描述][201

ゞ浴缸里的玫瑰/ 2022年04月17日 06:05/ 0 赞/ 322 阅读

相关 vue---computed计算属性的使用

一直以来在使用vue的时候，会对vue的computed属性和watch属性具体的使用分不清楚，总算花点时间整理了下。 computed:通常用于监控自己定义的变量，这个变量

落日映苍穹つ/ 2021年12月16日 07:03/ 0 赞/ 379 阅读

相关 vue.js计算属性基本用法

<!doctype html> <html> <head> <title>测试Vue.js</title> <meta charset

向右看齐/ 2021年10月19日 02:56/ 0 赞/ 328 阅读