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  ‘’

       }

    }

}

猜你喜欢

转载自blog.csdn.net/wenmin1987/article/details/84573486