摘要

        今天来分享一些vue对象中最常见的几个属性。其实前两天我们已经学过两个属性了,分别是el和data。他们的意思分别是挂载的元素和数据集合。今天我们学习我们平时最常用的Methods方法合集Computed 计算属性

1、Methods方法合集

Methods和它本身的意思一样是用来定义方法的,简单来说就是来定义我们js开发时定义的函数的。

代码:

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

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

<body>
    <div id="app">
        <div :class="getClass()">{{ message }}</div>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "222222",
                active: "aaaaa",
                aaa: "bbb"
            },
            methods: {
                getClass: function() {
                    console.log(this)
                    return [this.active, this.aaa];
                }
            },
        });
    </script>
</body>

</html>

结果:

 可以看出,在执行了getClass之后,class属性已经应用上了。这里有两点需要注意的。

1、在methods中使用data时,我加了一个this,这个this其实就是vue实例对象,通过控制台打印我们也看到了。

2、我在class中使用getClass时是加了小括号的,这意味着我们最后获得的是return后的结果,我们以后在绑定事件时,一般是不加小括号的。

2、computed计算属性

1、计算属性在写法上和methods一样

2、计算属性函数其实本质是一个属性对象,当调用属性时,会自动调用属性的get方法

3、平时主要用于数据的转化(例如算总价格,格式化时间)

代码:

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

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

<body>
    <div id="app">
        <div>总书价:{{ totalPirce }}</div>
    </div>

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                books: [{
                    name: "123",
                    pirce: 111
                }, {
                    name: "123",
                    pirce: 111
                }, {
                    name: "123",
                    pirce: 111
                }, {
                    name: "123",
                    pirce: 111
                }]
            },
            computed: {
                totalPirce: function() {
                    var pirces = 0;
                    for (var i = 0; i < this.books.length; i++) {
                        pirces += this.books[i].pirce;
                    }
                    return pirces;
                }
            }
        });
    </script>
</body>

</html>

结果:

计算属性和methods的区别

代码:

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

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

<body>
    <div id="app">
        <div>{{ name }}</div>
        <div>{{ name }}</div>
        <div>{{ name }}</div>
        <div>{{ name }}</div>
        <div>{{ getname() }}</div>
        <div>{{ getname() }}</div>
        <div>{{ getname() }}</div>
        <div>{{ getname() }}</div>

    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                firstName: "123",
                lastName: "456"
            },
            computed: {
                name: function() {
                    console.log("11111111"); //调用四次只打印了一次111111111,属性不变的时候不会重复执行,直接返回缓存
                    return this.firstName + " " + this.lastName;
                }
            },
            methods: {
                getname: function() {
                    console.log("2222222"); //打印四次,无缓存,每次调用都要执行
                    return this.firstName + " " + this.lastName;
                }
            },
        });
    </script>
</body>

</html>

 结果:

 可以看出,在平时适合使用计算属性的时候,我们应该优先使用计算属性。

Logo

前往低代码交流专区

更多推荐