zoukankan      html  css  js  c++  java
  • 09 计算属性之computed

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--    computed:对于比较长的计算和代码,放入computed方法中,直接{{函数名}}调用 同时监听数据变化作用-->
        <div id="app">
            {{reverseMsg}}
            <h3>{{fullName}}</h3>
            <button @click="handleClick">改变</button>
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'hello',
                    firstName:'walter',
                    lastName:'lizzy'
                },
                methods:{
                  handleClick:function () {
                        this.msg = '计算属性computed'
                  }
                },
                computed:{
                    //computed默认只有getter方法
                    //计算属性最大的有点:产生缓存,如果数据没有发生变化 直接从缓存取
                    reverseMsg:function () {
                        //数据反转
                        return this.msg.split('').reverse().join('')
                    },
                    fullName:function () {
                        return this.firstName +' '+ 'love'+ ' ' + this.lastName
                    }
                }
            })

        </script>
    </body>
    </html>
  • 相关阅读:
    备忘: Visual Studio 2013 VC++ IDE 使用小贴示。
    获取动态数组指针 所指向数组长度的一种方法
    备忘:C++ 类 (初学之实录)。
    备忘:VC++ 中的异常处理
    备忘: C++中的 vector 容器
    备忘:C++基础 -- 数据类型的学习总结
    Windws Server 2008 R2 WEB环境配置之MYSQL 5.6.22安装配置
    Windows Server 2008 R2 WEB服务器配置系列文章索引
    php学习过程二
    php学习过程一
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14202562.html
Copyright © 2011-2022 走看看