v-if的使用记录

一路向前的月光

于 2023-02-13 16:18:16 发布

阅读量608

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript java

本文链接：https://blog.youkuaiyun.com/a99101/article/details/129011146

文章讲述了如何在Vue.js中使用v-if指令结合includes方法来实现条件渲染。内容包括根据变量值决定组件显示，如控制全选按钮和多选框的显示状态，以及处理从后端获取的字符串数据类型。同时提到了reserve-selection属性在多选框场景下的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-if与includes的包含关系

一般使用v-if都是简单的一个变量为正或者假。

要么就是三目进行判断 v-if="test==xxx?"通过":" 失效" "

利用v-if控制多个页面中部分页面是否存在全选和操作按钮的显示

v-if="[1, 3].includes(+reqData.js_status2)

（+reqData.js_status2）是因为后端传过来的值为字符串使用+号进行隐式转换控制点进标题后是否显示页面中的相关元素

利用v-if控制多选框

  <!-- 多选框 -->
        <el-table-column
          v-if="[1, 3].includes(+reqData.js_status2)"
          type="selection"
          width="55"
          reserve-selection
        >

点击进入根据传入id进行判断是否需要多选属性

多选的reserve-selection 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）