vue简单样例2

最新推荐文章于 2024-01-09 13:51:45 发布

甜美河边的钓鱼人

最新推荐文章于 2024-01-09 13:51:45 发布

阅读量91

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/chenjianhuideyueding/article/details/107483096

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

计算属性computed：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>班级总人数：{{totalPersonCnt0}}</h2>
    <h2>班级总人数：{{totalPersonCnt1}}</h2>
    <h2>班级总人数：{{totalPersonCnt2}}</h2>
</div>


<script src = "../js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            classes: [
                {class:1,count:30},
                {class:2,count:32},
                {class:3,count:33},
                {class:4,count:28}
            ]
        },
        // 计算属性
        computed: {
            // 循环方式0
            totalPersonCnt0: function () {
                let result = 0;
                for(let i = 0; i< this.classes.length; i++){
                    result += this.classes[i].count;
                }
                return result;
            },
            // 循环方式1
            totalPersonCnt1: function () {
                let result = 0;
                for(let i in this.classes){
                    result += this.classes[i].count;
                }
                return result;
            },
            // 循环方式2
            totalPersonCnt2: function () {
                let result = 0;
                for(let tempClass of this.classes){
                    result += tempClass.count;
                }
                return result;
            }
        }
    })
</script>

</body>
</html>

上述的计算属性，相当于是定义了一个变量,然后提供了一个get方法，也可以提供set方法。

computed: {

totalPersonCnt0: {

get: function(){

let result = 0;
for(let tempClass of this.classes){
result += tempClass.count;
}
return result;

}

所以可以通过变量的形式取引用。

上述for循环的方式，用了三种。都是可行的。计算属性的方式，在同一个页面调用多次的时候，会只执行一次，如果是调用方法来返回的话，也是可行的，但是每调用一次，都会执行一次，效率会比较低。

甜美河边的钓鱼人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue简单样例2

计算属性computed：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>班级总人数：{{totalPersonCnt0}}</h2> <h2&g
复制链接

扫一扫