vue计算属性，方法，监听器

最新推荐文章于 2024-06-23 22:49:22 发布

「已注销」

最新推荐文章于 2024-06-23 22:49:22 发布

阅读量144

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/gwz1196281550/article/details/102622161

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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">
    <title>字段值处理方法：计算属性，方法，监听器</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{fullName}}
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: "Sin",
                lastName: "Lee",
                fullName: "Sin",
            },
            //监听属性变化
            // watch: {
            //     //监听firstName改变
            //     firstName: function () {
            //         return this.fullName = this.firstName + " " + this.lastName
            //     },
            //     //监听lastName改变
            //     lastName: function () {
            //         return this.fullName = this.firstName + " " + this.lastName
            //     }
            // }
            //定义方法 无缓存特性
            // methods: {
            //     fullName: function () {
            //         return this.firstName + " " + this.lastName
            //     }
            // },
            //定义计算方法 有缓存特性
            // computed: {
            //     fullName: function () {
            //         console.log("计算了一次");
            //         return this.firstName + " " + this.lastName
            //     }
            // }
        })
    </script>
</body>
</html>