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

「已注销」

于 2019-10-18 11:20:04 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/gwz1196281550/article/details/102622161

vue 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了Vue.js中计算属性的使用方法及其优势。通过一个具体的实例，展示了如何利用计算属性来处理数据字段值，重点讲解了计算属性相较于普通方法的缓存特性，以及如何在Vue实例中定义和使用计算属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>