如何在vue中优雅地使用v |
您所在的位置：网站首页 › if判断0 › 如何在vue中优雅地使用v |
如何在vue中优雅地使用v
|
情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。
下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用标签进行优化一下。 123 456 789标签可以在模板中的任何地方使用，现在我们使用 标签来分组同一个条件判断的这些元素，并将v-if提升到模板template本身。 这样使用就可以让下面4个标签同时控制了。 template标签跟div标签或者其他标签最大区别就是不会作为渲染的结果（f12看不到）。 123 456 789 export default { data() { return { expanded: true }; } };
普通写法，代码有点冗余 v-if=" type==1 || type==2 || type==3 "优雅写法 v-if=" [1,2,3].includes(type) " 情况三：经常使用v-if、v-else-if、v-else通过条件来判断具体显示某种信息 苹果 香蕉 西瓜 橘子 export default { data() { return { type: 3 }; } };页面显示 西瓜 这种情况代码显示繁琐。 我们就可以使用过滤器来处理。 vue中分为局部过滤器和全局过滤器 1) 局部过滤器 {{ type | fruitFilter }} export default { data() { return { type: 7 }; }, filters: { fruitFilter(value) { switch (value) { case 1: return "苹果"; break; case 2: return "香蕉"; break; case 3: return "西瓜"; break; default: return "其他水果"; break; } } } };type是要判断的类型，fruitFilter是自定义的局部过滤器。 fliters所在位置是跟data和vue的生命周期同一级别。 2) 全局过滤器 如果是公共使用的可以在main.js自定义全局 /*全局过滤器 */ Vue.filter('fruitFilter', function(value) { switch (value) { case 1: return "苹果"; break; case 2: return "香蕉"; break; case 3: return "西瓜"; break; default: return "其他水果"; break; } })如有其他简化方法以后继续更新 |
【本文地址】