Vue学习笔记（五）之Vue的计算属性，方法和侦听器

Vue的计算属性，方法和侦听器。

计算属性

效果

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://vuejs.org/js/vue.js"></script>
    <title>计算属性，方法和侦听器</title>
</head>
<body>
    <div id="app">
        <!--{{firstName + " " + lastName}}-->
        {{fullName}}
        {{age}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Kyrie",
                lastName: "Irving",
                age: 18
            },
            computed: {
                fullName: function () {
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName
                }
                //fullName是根据firstName和lastName的计算得出，当fullName依赖的变量没有改变，
                // vue会缓存，即使其他变量改变重新渲染也不会重新计算
            }
        })
    </script>
</body>
</html>

控制台输入vm.age = 22，fullName不会执行，控制台输入vm.firstName = "xxx"，fullName会执行

方法

效果
代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://vuejs.org/js/vue.js"></script>
    <title>计算属性，方法和侦听器</title>
</head>
<body>
    <div id="app">
        <!--{{firstName + " " + lastName}}-->
        {{fullName()}}
        {{age}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Kyrie",
                lastName: "Irving",
                age: 18
            },
            methods: {
                fullName: function () {
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName
                }
                //我们可以用方法的方式重现fullName的效果，但是无法做到缓存功能，对于性能来说是很大的消耗
            }
        })
    </script>
</body>
</html>

控制台输入vm.age = 22，fullName会执行，控制台输入vm.firstName = "xxx"，fullName会执行

侦听器

效果

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://vuejs.org/js/vue.js"></script>
    <title>计算属性，方法和侦听器</title>
</head>
<body>
<div id="app">
    {{fullName}}
    {{age}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            firstName: "Kyrie",
            lastName: "Irving",
            fullName: "Kyrie Irving",
            age: 18
        },
        watch: {
            firstName: function () {
                console.log("计算了一次")
                this.fullName = this.firstName + " " + this.lastName
            },
            lastName: function () {
                console.log("计算了一次")
                this.fullName = this.firstName + " " + this.lastName
            }
        }
    })
</script>
</body>
</html>

控制台输入vm.age = 22，fullName不会执行，控制台输入vm.firstName = "xxx"，fullName会执行，但是代码简洁度不高，所以能用计算属性就优先使用计算属性。

计算属性的setter和getter

效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性的setter和getter</title>
    <script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
    {{fullName}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            firstName: "Kyrie",
            lastName: "Irving",
        },
        computed: {
            fullName: {
                get: function () {
                    return this.firstName + " " + this.lastName
                },
                set: function (value) {
                    var array = value.split(" ")
                    this.firstName = array[0]
                    this.lastName = array[array.length - 1]
                }
            }
        }
        //控制台输入vm.fullName = "Leborn James"，名字会随之更新
    })
</script>
</body>
</html>

Vue的计算属性，方法和侦听器。

计算属性

方法

侦听器

计算属性的setter和getter

FEATURED TAGS

FRIENDS