vue解决多次使用v-if的问题方案

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

例如：

<span v-if="type=='1'">苹果</span>
<span v-else-if="type=='2'">香蕉</span>
<span v-else="type=='3'">橘子</span>

再这样的情况， 代码显示繁琐。 我们就可以使用过滤器来处理。

<el-table-column prop="num3" label="来源" header-align="center" align="right" width="150">
  <template slot-scope="scope">
    {{ scope.row.articleSource | articleType }}
  </template>
</el-table-column>

scope.row.articleSource 是你要判断的类型。 articleType 是你自定的过滤器。自定义的过滤器可以放到当前页面。 如果是公共使用的可以自定义全局。 fliters所在位置是跟data和vue的生命周期同一级别。

filters: {
    articleType: function(value) {
      var returnValue = ''
      switch (value) {
        case 1:
          returnValue = '苹果'
          break
        case 2:
          returnValue = '香蕉'
          break
        case 3:
          returnValue = '橘子'
          break
      }
      return returnValue
    }
  },

全局定义：

Vue.filter('articleType', function (value) {
 
})

以上仅代表个人理解。如有不对！ 欢迎指正~ 感谢