vue v-if方法扩展写法

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

例1：

<span v-if="YJLX=='1'">收件箱</span>
<span v-else-if="YJLX=='2'">发件箱</span>
<span v-else="YJLX=='3'">草稿箱</span>

方式1：

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

方式2：

使用过滤器filter：

<span>{{ props.item.YJLX | judgeLX }}</span>

然后定义一个过滤器：

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：

<input v-if="props.item.SFYD=='1'" type="checkbox" checked="checked">
<input v-else="props.item.SFYD=='0'" type="checkbox">

改写：

<input type="checkbox" :checked="props.item.SFYD=='1'">