Vue学习（四）——计算属性

最新推荐文章于 2021-11-23 21:26:39 发布

秃头的毛睿

最新推荐文章于 2021-11-23 21:26:39 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108929319

版权

计算属性是computed：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <h1>{{fullName}}</h1>
        <p>{{GfullName()}}</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed:[false,false,false,false],

                firstName:'涂',
                lastName:'博闻'

            },
            computed:{
                fullName:function(){
                    return this.firstName+this.lastName;
                }
            },
            methods: {
                GfullName:function(){
                    return this.firstName+this.lastName;
                }
            }
        })
    </script>
</body>

</html>

我们在需要将数据对象中数据运算之后显示的情况下，既可以使用methods来定义函数返回值，然后使用{{}}来解析运算函数，也可以定义computed计算属性，这样不用加括号，使程序更有可读性。

计算属性的setter和getter方法：

一般的计算属性都会有set和get方法，但是由于一般set方法不会被使用，所以像上面那样定义计算属性，在调用时就会直接调用属性的get方法。set方法一般是计算属性被修改之后会调用的方法，get方法是获取计算属性时调用的方法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <h1>{{fullName}}</h1>
        <p>{{GfullName()}}</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed: [false, false, false, false],

                firstName: '涂',
                lastName: '博闻'

            },
            computed: {
                fullName: {
                    get: function () {
                        return this.firstName + this.lastName;
                    },
                    set: function (newValue) {
                        const name=newValue.split(' ');
                        this.firstName=name[0];
                        this.lastName=name[1];
                        alert("修改了名字");
                    }
                }
            },
            methods: {
                GfullName: function () {
                    return this.firstName + this.lastName;
                }
            }
        })
    </script>
</body>

计算属性和 methods方法的区别：

计算属性会被浏览器缓存起来，如果值没有改变就不会被调用函数，但是如果是methods方法来调用，无论值有没有改变，只要调用一次，函数就会被调用一次，程序运行速度会很慢。

秃头的毛睿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（四）——计算属性

计算属性是computed：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> <
复制链接

扫一扫