computed和watch的区别 class style样式绑定

                       computed和watch的区别

 1.computed能完成的功能watch都可以完成

 2.watch能完成的功能 computed不一定能完成 例如 watch可以进行异步(定时器)任务操作

 watch:{

        fistName(val){

          setTimeout(()=>{

            this.fullName = val + '-' + this.lastName

          },1000)

        },

        lastName(val){

            this.fullName = this.fistName + '-' +  val

        }

    },

  两个原则

1.所有被Vue管理的函数，最好写成普通函数 这样this的指向才是vm 或 组件实例对象

  2.所有不被Vue管理的函数(定时器的回调函数，ajax的回调函数)最好写成箭头函数

   这样this的指向才是vm 或组件实例对象

                               class style样式绑定

 

       

{{name}}

 const vm = new Vue({

    el:"#root",

    data:{   //属性

      name:'尚硅谷',

      mood:'normal',

      classArr:['a','s','p'],

    },

    methods: {

        changeMood(){

           const arr = ['happy','sad','normal']

           const index = Math.floor(Math.random()*3)

           this.mood = arr[index]

        }

    },

})

     

       

{{name}}

 const vm = new Vue({

    el:"#root",

    data:{   //属性

      mood:'normal',

      classArr:['a','s','p'],

  绑定class样式---对象写法 适用于：要绑定的样式确定名字也确定 但 要动态决定要不要

         

{{name}}

const vm = new Vue({

    el:"#root",

    data:{                    //属性

      name:'尚硅谷',

      mood:'normal',

      classObj:{

          sss:false,

          ttt:false

      },

    },)

         

{{name}}

         

         

{{name}}

const vm = new Vue({

    el:"#root",

    data:{   //属性

      name:'尚硅谷',

      mood:'normal',

      styleObj:{

        fontSize: '40px',

        color:'red'

      }

    },