Vue中的计算属性介绍

<div id="app">
  {
<!-- -->{ message.split('').reverse().join('') }}
</div>

computed{

函数（）{return //必须又返回值。}通常该函数为get函数

}

<div id="app">
        <p>原来的字符串：{
<!-- -->{mes}}</p>
        <p>反转后的字符串：{
<!-- -->{reverseMes}}</p>
    </div>

let vm = new Vue({
            el:'#app',
            data:{
                mes:'sayhello'
            },
            computed: {
                reverseMes(){
        // 计算属性中一定要有返回值
                    return this.mes.split('').reverse().join('')
                }
            }
        })

<div id="app">
        <p>原字符串：{
<!-- -->{name}}</p>
        <p>首字母大写：{
<!-- -->{toUpperCase}}</p>
    </div>

el:"#app",
            data:{
                name:'tom'
            },

            // 计算属性
computed:{
            // 自定义 计算属性
             toUpperCase(){
                return this.name.charAt(0).toUpperCase().concat(this.name.slice(1,3))
              }
            }

<div id="app1"></div>

    <div id="app2">
        {
<!-- -->{reverseMes}}
    </div>
let vm1 = new Vue({
            el:'#app1',
            data:{
                mes:'hello'
            }
        })

        let vm2 = new Vue({
            el:'#app2',
            computed: {
                reverseMes(){
                    // 使用实例 vm1中的data数据中心的 mes 去做反转字符串的操作
                    return vm1.mes.split('').reverse().join('')
                }
            }
        })