计算属性，方法，侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB2312">
    <title>计算属性，方法，侦听器</title>
    <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
    <!--<style>
        .active {
            background-color: #ccc;
        }
    </style>-->
</head>
<body>
    <!--用插值表达式  可以直接调用方法里面定义的函数-->
    <div id="app">

        {{fullName}}
        {{age}}
        <br>
        {{message+"jlkjlkj"}}
    </div>
    <!--demo-->
     
<!--    ////demo-字符倒序-4-->
    <!--<div id="app">
        <p>Original message:"{{ message }}"</p>
        <p>Computed reversed message:"{{ reversedMessage }}"</p>
    </div>-->

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Dell",
                lastName: "Lee",
                fullName: "Dell Lee",
                age: 28,
                message: 'Hello World!',
            },

            //这三种方法，computed的效率最高

            ////侦听器-1
             //watch:{
             //    firstName: function () {
             //        console.log("计算了一次");
             //        this.fullName = this.firstName + " " + this.lastName;
             //    },
             //    lastName: function () {
             //        console.log("计算了一次");
             //        this.fullName = this.firstName + " " + this.lastName;
             //    }
             //}

            //方法 计算的效率没有计算属性的效率高-2
             //methods:{
             //    fullName:function () {
             //        return this.firstName + " " + this.lastName
             //    }
             //}

            ////计算属性，具有缓存，如果依赖的值没有发生改变则不会再计算-3
            //computed: {
            //    fullName: function () {
            //        console.log("计算了一次");
            //        return this.firstName + " " + this.lastName
            //    }
            //}


            ////demo-字符倒序计算-4
            //computed: {
            //    reversedMessage: function () {
            //        //this 指向 vm 实例
            //        //split()方法用于把一个字符串分割成字符串数组
            //        return this.message.split('').reverse().join('')
            //    }
            //}

            //当依赖的值发生变化时，computed会发生改变-5
            computed: {
                fullName: {
                    get: function () {
                        return this.firstName + " " + this.lastName
                    },
                    set: function (value) {
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }

        })
    </script>
</body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

计算属性，方法，侦听器

计算属性，方法，侦听器

相关阅读更多精彩内容

友情链接更多精彩内容