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...
·
在使用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) {
})
以上仅代表个人理解。如有不对! 欢迎指正~ 感谢
更多推荐
已为社区贡献1条内容
所有评论(0)