v-if

语法:v-if="表达式"表达式值为 true,显示;false,隐藏
原理:基于条件判断,来控制创建或移除元素节点(条件渲染)
场景:要么显示,要么不显示,不频繁切换的场景
其它:可以配合 v-else-if / v-else 进行链式调用条件判断

例:

                      <td>
                        <span v-if="e.job == 1">班主任</span>
                        <span v-else-if="e.job == 2">讲师</span>
                        <span v-else-if="e.job == 3">学工主管</span>
                        <span v-else-if="e.job == 4">教研主管</span>
                        <span v-else-if="e.job == 5">咨询师</span>
                        <span v-else>其他</span>
                    </td>

小技巧:性别类显示可以直接用插值表达式显示如:{{e.gender == 1?'男' : '女'}}

还有上面一大串v-if 可用一下一行代码替换 巧用数组下标

{{['班主任','讲师','学工主管','教研主管','咨询师'][e.job-1]}}

posted @ 2025-07-05 18:11  休玛  阅读(10)  评论(0)    收藏  举报