美文网首页
vue零基础开发008——计算属性,方法与监听器

vue零基础开发008——计算属性,方法与监听器

作者: 文朝明 | 来源:发表于2019-11-19 12:09 被阅读0次
    <!DOCTYPE html>
    <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:"周",
        lastName:"假伦",
        age:"18",
            },
    
            //计算属性
            computed:{
            fullName:function(){
            console.log('计算了一次computed')
                return this.firstName+""+this.lastName
            }
        },
            //方法
            //methods:{
            //  fullName:function(){
            //  console.log("计算了1次")
            // this.firstName+""+this.lastName
    //}
    //},
            //监听器
            watch:{
                firstName:function(){
                    console.log('计算了1次first')
                this.fullName=this.firstName+""+this.lastName
                },
                    
                lasttName:function(){
                console.log('计算了1次last')
                this.fullName=this.firstName+""+this.lastName
                }
            }
            })
        </script>
    </body>
    </html>
    
    计算属性,方法与监听器 计算属性,方法与监听器

    相关文章

      网友评论

          本文标题:vue零基础开发008——计算属性,方法与监听器

          本文链接:https://www.haomeiwen.com/subject/zpewictx.html