1. 程式人生 > >vue實際應用----props的預設資料,methods與compited

vue實際應用----props的預設資料,methods與compited

1.子元件props的寫法

 如果預設porps的為物件

  props:{

     xxobj:{

              type:Object,

           default:()=>{

                  return{

                }

          }

    }

}

如果預設props的為陣列

props:{

    xxx:{

        type:Array,

       default:()=>[

          {}

       ]

   }

}

computed的用法:

    型別{ [key: string]: Function | { get: Function, set: Function } } 

  即computed:{

            xx(){//這個xx屬性是隻讀屬性

                       邏輯處理

                    2.return  result

                  } ,

             

     yy: {//這個屬性可讀寫
      get: function () {
        return this.a + 1
      },
      set: function (v) {//vm.yy=3;則vm.a=2
        this.a = v - 1
      }
    }

   }

 

computed和methods

<p>{{formatvalue(val)}}</p>

computed:{//需要經常計算 有快取的場景

    formatvalue(){

      return  function(value){

              let   aa=Number(value);

             let    bb='';

           switch(aa){

           case 1:

                  bb="很好"     ;

                 break;    

                 。。。

              default:

             bb=‘’

           }

         return  bb   //可以把上面邏輯放在一個方法裡面

        }

    }     

}

method:{

     formatvalue(val){

       let   vals=Number(val)

    switch(vals){

       case 1:

           return "很好"

        。。。。。

       default:

       return  ‘’

       }

    }

}