欢迎光临
感谢一路有你

vue学习初体验(9)属性方法监听器

如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
 
<!-- 
    方法
    属性
    监听器
 -->
 <!-- 案例:打印出fullName -->
<html>
<title></title>
<body>
    <div id="app">
        <!-- 计算属性 -->
        <!-- {{fullName}} -->

        <!-- 方法 -->
        <!-- {{fullName()}} -->

        {{fullName}}

    </div>
    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            firstName:'Dell',
            lastName:'Lee',
            fullName:"Dell Lee"
        },
        methods:{
            // 方法
            // fullName:function(){
            //     return this.firstName+ " "+this.lastName
            // }
        },
        //计算属性:有缓存机制,只要依赖的没有改变,则使用缓存数据
        // computed:{
        //     fullName:function(){
        //         return this.firstName+ " "+this.lastName
        //     }
        // }

        //监听器,具有缓存
        watch:{
            firstName:function(){
                this.fullName = this.firstName+" "+this.lastName;
            },
            lastName:function(){
                this.fullName = this.firstName+" "+this.lastName;
            }

        }
    })

    

</script>
        
        
        
</html>

 

赞(0) 打赏
未经允许不得转载:王明昌博客 » vue学习初体验(9)属性方法监听器
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏