vue中计算属性，方法，侦听器

最新推荐文章于 2024-10-10 10:50:43 发布

weixin_30875157

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量71

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuyxbiubiu/p/9956994.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中计算属性，方法，侦听器</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <!--{{fullName()}}-->
    {{fullName}}
    {{age}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            FirstName: 'alex',
            lastName: 'Xu',
            fullName: "alex Xu",
            age: 25

        },
        //侦听器  有缓存机制
        watch: {
            FirstName: function () {
                console.log('计算一次');
                this.fullName = this.FirstName + ' ' + this.lastName;

            },
            lastName: function () {
                console.log('计算一次');
                this.fullName = this.FirstName + ' ' + this.lastName;
            }
        },

        //方法  内部没有缓存机制
        methods: {
            fullName: function () {
                console.log("计算一次");
                return this.FirstName + " " + this.lastName

            }
        },
        // 计算属性   用于缓存的  优先选择
        computed: {
            fullName: function () {
                console.log('计算一次');  //如果仅修改年龄 fullName 是不需要重新渲染的
                return this.FirstName + " " + this.lastName
            }
        }
    })
</script>
</body>
</html>

<!--
如果一个效果 计算属性 方法 和侦听器都可以实现 优先选择计算属性
-->