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

最新推荐文章于 2022-09-27 16:18:49 发布

一缕清风007

最新推荐文章于 2022-09-27 16:18:49 发布

阅读量118

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/baokx/article/details/98749265

版权

Vue 专栏收录该内容

20 篇文章 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>

一缕清风007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE2.0学习记录——计算属性、方法、侦听器

返回导航页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性、方法、侦听器</title></head><body><div id="app"> {{full...
复制链接

扫一扫

专栏目录