vue v-if方法扩展写法

在使用vue的时候，经常会使用到v-if、v-else-if、v-else通过条件来判断具体显示某种信息，这种方法虽然可以实现，在整体代码看起太过低级，可用以下两种方式来替代：

例1：

收件箱
发件箱
草稿箱

方式1：

{{["收件箱","发件箱","草稿箱"][Number(props.item.YJLX) - 1]}}

方式2：

使用过滤器filter：

{{ props.item.YJLX | judgeLX }}

然后定义一个过滤器：

filters:{
   judgeLX:function(value){
      var returnValue="";
      switch(value){
         case 1:
            returnValue="收件箱";
            break;
         case 2:
            returnValue="发件箱";
            break;
         case 3:
            returnValue="草稿箱";
            break;
      }
      return returnValue;
   }
}

filter可全局定义：

Vue.filter('judgeLX', function (value) {

})

例2：

改写：