VUE2.0学习记录——计算属性、方法、侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性、方法、侦听器</title>
</head>
<body>
<div id="app">
    {{fullName_computed}}<br>
    {{fullName_method()}}<br>
    {{fullName_watch}}<br>
    {{age}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName: 'Zhang',
            lastName: 'San',
            fullName_watch: 'Zhang San',
            age: 28
        },
        computed: {
            fullName_computed: function () {
                console.log('computed'); //不发生改变的时候只计算一次
                return this.firstName + " " + this.lastName;
            }
        }
        ,methods: {
            fullName_method: function () {
                return this.firstName + " " + this.lastName;
            }
        }
        ,watch: {
            firstName: function () {
                this.fullName_watch =  this.firstName + " " + this.lastName;
            },
            lastName: function () {
                this.fullName_watch = this.firstName + " " + this.lastName;
            }
        }

    });
</script>
</html>

来源：https://blog.csdn.net/baokx/article/details/98749265

标签

firstname

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!