methods computed

1 差值语法

<template id="tem">
      <h2>{{firstName+" "+lastName }}</h2>
      <h2>{{score >= 60 ? '及格':'不及格'}}</h2>
      <h2>{{message.split(" ").reverse().join(" ")}}</h2>
    </template>
data(){
            return{ 
                firstName:'Kobe',
                lastName:'Bryant',
                score:80,
                message:'hello word'
            }
        },

2methods

<template id="tem">
      <h2>{{getFullName()}}</h2>
      <h2>{{getResult()}}</h2>
      <h2>{{getReverseMsg()}}</h2>
    </template>
methods:{
            getFullName(){
                return this.firstName+' '+this.lastName
            },
            getResult(){
                return this.score <=60? "不及格":"及格"
            },
            getReverseMsg(){
                return this.message.split(" ").reverse().join(" ")
            }
        }

3.computed

 <template id="tem">
      <h2>{{fullName}}</h2>
      <h2>{{result}}</h2>
      <h2>{{reverseMsg}}</h2>
    </template>
 computed:{
            //fullName计算属性
            fullName(){
               return this.firstName+' '+this.lastName; 
            },
            result(){
                return this.score <=60? "不及格":"及格"
            },
            reverseMsg(){
                return this.message.split(" ").reverse().join(" ")
            }
        }

//计算属性 有缓存 多次使用 只会执行一次
// 计算属性 会随着依赖的数据的改变 发生改变

3.2 computed的getter 和 setter

 <h2>{{fullName}}</h2>
        <button @click="changeName">changeName</button>

 changeName(){
                this.fullName="yoke coder"
            }
computed:{

 /*  fullName(){
                console.log("1");
               return this.firstName+' '+this.lastName; 
            }, */
            //getter 和 setter
            fullName:{
                get(){
                    return this.firstName+' '+this.lastName;
                },
                set(newValue){
                    console.log(newValue);
                    const names = newValue.split(" ");
                    this.firstName =names[0];
                    this.lastName =names[1];
                }

            }
        }