正文

如何在vue中优雅地使用v-if判断(代码片段)

铁锤妹妹@  铁锤妹妹@  2022-12-14  743

关键词：

情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。

下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用<template>标签进行优化一下。

<template>
  <div class="card">
    <img src="../../assets/image/background frame.png" />
    <h3 v-if="expanded">123</h3>

    <h4 v-if="expanded">456</h4>
    <div class="card-content" v-if="expanded">789</div>
    <img v-if="expanded" src="../../assets/image/background frame.png" />
  </div>
</template>

<template> 标签可以在模板中的任何地方使用，现在我们使用<template> 标签来分组同一个条件判断的这些元素，并将v-if提升到模板template本身。
这样使用就可以让下面4个标签同时控制了。
template标签跟div标签或者其他标签最大区别就是不会作为渲染的结果（f12看不到）。

<template>
  <div class="card">
    <img src="../../assets/image/background frame.png" />
    <template v-if="expanded">
      <h3>123</h3>
      <h4>456</h4>
      <div class="card-content">789</div>
      <img src="../../assets/image/background frame.png" />
    </template>
  </div>
</template>
<script>
export default 
  data() 
    return 
      expanded: true
    ;
  
;
</script>

<style></style>

情况二：v-if中条件较多时优雅写法

普通写法，代码有点冗余

v-if=" type==1 || type==2 || type==3 "

优雅写法

v-if=" [1,2,3].includes(type) "

情况三：经常使用v-if、v-else-if、v-else通过条件来判断具体显示某种信息

<template>
  <div class="card">
    <span v-if="type == 1">苹果</span>
    <span v-else-if="type == 2">香蕉</span>
    <span v-else-if="type == 3">西瓜</span>
    <span v-else>橘子</span>
  </div>
</template>

<script>
export default 
  data() 
    return 
      type: 3
    ;
  
;
</script>

<style></style>

页面显示西瓜
这种情况代码显示繁琐。我们就可以使用过滤器来处理。
vue中分为局部过滤器和全局过滤器

1) 局部过滤器

<template>
  <div class="card">
    <span> type | fruitFilter </span>
  </div>
</template>

<script>
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;
      
    
  
;
</script>

<style></style>

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;
  
)

如有其他简化方法以后继续更新

vue中的v-if指令判断某个元素满足多个条件的写法同时也适用于逻辑判断的代码中优雅的判断可用于vue的标签上(代码片段)

目录1、includes2、indexOf3、相关链接1、includesconsole.log([7,3,6].includes(3));//trueconsole.log([7,3,6].includes(1));//false应用<divv-if="[7,3,6].includes(3)"></div>if([7,3,6].includes(1))returnfalse;2、indexOfconsole.log([3,6,7].indexOf(7));//返回下标2cons... 查看详情

vue中使用v-if判断某个元素满足多个条件的简约写法-案例(代码片段)

v-if判断active满足0的时候写法是：v-if="active===0"那如果active同时要满足0，1，2三个值的时候，如果在v-if里用||并列写如：v-if="active===0||active===1 查看详情

如何在国内优雅地使用rancher(代码片段)

本文来源RancherLabs Rancher进入中国已经4年，并在今年2月份完成了中国本土化和国产化。作为一款开源的企业级Kubernetes管理平台，我们一直十分关注Rancher社区用户的各种诉求。在我们的技术社区中，我们常常收到这样的... 查看详情

如何优雅地使用命令行设置windows文件关联(代码片段)

如何优雅地使用命令行设置windows文件关联使用ftype查看帮助设置关联所需命令有ftypeassoc，需要管理员权限。如果忘记使用方法可通过ftype的帮助获取查看方法C:WINDOWSsystem32>ftype/?显示或修改用在文件扩展名关联中的文件类型FTYPE... 查看详情

vue.js条件与循环(代码片段)

来源：阿里云大学——开发者课堂——Vue.js自学手册 v-if条件判断使用v-if指令：v-if指令在元素和template中使用v-if指令：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue测试实例-阿里云大学( 查看详情

使用optional更优雅地处理非空判断(代码片段)

（一）引言在平常的编码之中，有一个错误总会在你的意料之外出现，那就是空指针异常。空指针的出现也很简单，你得到了一个null对象，调用了一些方法，出现空指针异常。空指针会出现在各种地方... 查看详情

vue中v-if和v-for的区别是什么(代码片段)

...的。首先在官方文档中明确指出v-for和v-if不建议一起使用。一、v-if和v-for的作用v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。v-for指令基于一个数组来渲染一个列表。v-for指令需... 查看详情

如何优雅地使用minicom(代码片段)

minicom简介安装minicom是linux下一款常用的串口调试工具。ubuntu环境下，使用如下命令安装sudoapt-getinstallminicom配置使用前需要进行配置，执行sudominicom-s可打开minicom并进入配置模式，使用方向键，选择需要配置的项目，如Serialportsetu... 查看详情

kotlin优雅地判断edittext数据是否为空(代码片段)

很多时候我们要判断EditText输入的数据是否为空，在Java中需要以下代码：Stringmobile=etMobile.getText().toString();if(TextUtils.isEmpty(mobile))showError("手机号不能为空");return;Stringpassword=etPassword.getT 查看详情

kotlin优雅地判断edittext数据是否为空(代码片段)

如何在uniapp中优雅地使用webview(代码片段)

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助从webview页面传值到uniapp中官方文档已经很详细了,这里给大家上我的实战代码，首先在webview页面中引入相关依赖：<scriptt... 查看详情

vue中点击空白处隐藏弹框（用指令优雅地实现）(代码片段)

...弹框经常性出现，并要求点击弹框外面，关闭弹框，那么如何实现呢？且听我一一。。。不了，能实现效果就好<template><div><divclass="show"v-show="show"v-clickoutside="handleClose">显示</div></div></template><s 查看详情

vue简明实用教程(05)——v-if和v-show指令(代码片段)

...渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。v-if和v-show指令示例在此，以示例形式详细介绍v-if和v-show指令的基本使用。示例1<!DOCTYPEhtml><h... 查看详情

如何在国内优雅地使用rancher(代码片段)

优雅地使用vscode来编辑vue文件

... vue.js当然vscode对vue也不是原生支持的，今天来扒一扒如何配置vscode以便优雅地编辑vue文件先来扒一扒使用PHPStorm遇到的问题：vue文件虽然可以通过插件来解决高亮问题，但是 <script> 标签中的ES6代码的识别老是出... 查看详情

vue中v-if与v-show的区别以及使用场景

...术A基于以上区别，因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属... 查看详情

vue开发实战基础篇#13：如何优雅地获取跨层级组件实例（拒绝递归）(代码片段)

说明【Vue开发实战】学习笔记。ref引用信息递归查找代码繁琐.性能低效callbackref主动通知(setXxxRef)主动获取(getXxxRef)比如E节点更新就通知A组件，A组件进行ref的缓存即可组件A<template><divclass="border"><h1>A结... 查看详情

优雅地使用macos开发(代码片段)

1MacOS终端利器-iTerm2MacOS自带的Terminal命令都保存在.bash_profile文件中iTerm2命令都保存在.zshrc中所以我们将很多命令保存且编辑2Ohmyzsh安装方法有两种，可以使用curl或wget，看自己环境或喜好：#curl安装方式sh-c"$(curl-fsSLh... 查看详情