javascript - Vue2 v-if与v-else-if双条件渲染问题？
我在vue2中用v-if条件渲染不同的div元素。当v-if中的只有一个判断条件时渲染是正常的，但是有两个&&条件时就条件渲染不成功了（总是执行渲染v-else下的div元素）。这是为什么呢？
贴下代码：
<!--这里根据条件渲染不同的消息头部--> <div class="msgcard-content-header" v-if="item.msg_unit == '添加参与人'"> <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span> <span class="cut-text" style="font-size:1rem;">邀请你加入到任务的参与人中</span> <el-badge style="position:absolute;right:0;" is-dot></el-badge> </div> <div class="msgcard-content-header" v-else-if="item.msg_unit == '参与人' && item.msg_unit_action == '删除'"> <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span> <span class="cut-text" style="font-size:1rem;">将你从参与人中移除</span> <el-badge style="position:absolute;right:0;" is-dot></el-badge> </div> <div class="msgcard-content-header" v-else-if="item.msg_unit == '负责人' && item.msg_unit_action == '添加'"> <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span> <span class="cut-text" style="font-size:1rem;">给你分配了任务</span> <el-badge style="position:absolute;right:0;" is-dot></el-badge> </div> <div class="msgcard-content-header" v-else> <span class="msgcard-content-header-name">{{item.msg_sender_name}}</span> <span class="cut-text" style="font-size:1rem;">将你从参与人中移除</span> <el-badge style="position:absolute;right:0;" is-dot></el-badge> </div>item是dataList的数组项，里面的数据都是正确的。
共有1个答案
你的代码在逻辑上没有问题，v-if 和 v-else-if 应该可以正常工作，只要你的数据满足条件。如果 v-if 和 v-else-if 没有按预期工作，那么可能的问题可能在于 item.msg_unit 和 item.msg_unit_action 的值。
这里有几个可能的问题点：
- 数据类型：确保
item.msg_unit和item.msg_unit_action的数据类型是你期望的。例如，如果它们是字符串，确保比较时它们确实是字符串，而不是其他类型（如数字或对象）。 - 大小写敏感：JavaScript 和 Vue.js 都是大小写敏感的，所以确保
item.msg_unit和item.msg_unit_action的值的大小写与你在v-if和v-else-if条件中使用的值完全匹配。 - 额外的空格或字符：有时，数据值中可能包含额外的空格或不可见的字符，这可能会干扰比较。确保
item.msg_unit和item.msg_unit_action的值没有额外的空格或字符。 - 条件逻辑：检查你的条件逻辑是否正确。在你的代码中，
v-else-if的条件在逻辑上应该是互斥的，这意味着它们不应该同时为真。如果两个条件都为真，那么 Vue.js 将只渲染第一个匹配的v-else-if条件。
要调试这个问题，你可以尝试以下步骤：
- 在 Vue 组件的
created或mounted生命周期钩子中，打印item.msg_unit和item.msg_unit_action的值，以确保它们是你期望的值。 - 在你的模板中，尝试添加一些临时的
v-if或v-else-if条件来检查特定的值或条件是否为真。 - 使用浏览器的开发者工具来检查渲染的 DOM，看看哪些元素实际上被渲染了。
通过这些步骤，你应该能够找出为什么条件渲染不按预期工作的原因。
-
问题内容： 伙计们，我有几个问题： 语句和an 之间在JavaScript中是否存在性能差异？ 如果可以，为什么？ 是的行为和跨浏览器的不同？（FireFox，IE，Chrome，Opera，Safari） 提出这个问题的原因是，在Firefox中大约有1000多个案例的情况下，我似乎获得了更好的性能。 编辑 Unfortuantly这不是我的代码JavaScript是正在生产服务器端从编译的库，
-
本文向大家介绍Vue.js v-if / v-else，包括了Vue.js v-if / v-else的使用技巧和注意事项，需要的朋友参考一下 示例 假设我们有一个Vue.js实例定义为： 您可以通过包含v-if指令有条件地呈现任何html元素；包含v-if的元素仅在条件评估为true时才会呈现： <h1>在这种情况下，该元素将呈现，因为变量'a'为true。v-if可以与任何计算结果为布尔值的表
-
Go语言的条件判断结构也很简单。 package main import "fmt" func main() { // 基本的例子 if 7%2 == 0 { fmt.Println("7 is even") } else { fmt.Println("7 is odd") } // 只有if条件的情况 if 8%4
-
2.1.0 新增 类型：any 限制：前一兄弟元素必须有 v-if 或 v-else-if。 用法：/li> 表示 v-if 的 “else if 块”。可以链式调用。 <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C
-
本文向大家介绍对vue v-if v-else-if v-else 的简单使用详解，包括了对vue v-if v-else-if v-else 的简单使用详解的使用技巧和注意事项，需要的朋友参考一下 首先vue.js请注意 2.1.0版本以上方可使用v-else-if 页面展示如下： vue.js下载：https://github.com/vuejs/vue 以上这篇对vue v-if v-els
-
本文向大家介绍C# if, if...else, if... else if ，包括了C# if, if...else, if... else if 的使用技巧和注意事项，需要的朋友参考一下 示例 该if语句用于控制程序的流程。一条if语句根据Boolean表达式的值标识要运行的语句。 对于单个语句，braces{}是可选的，但建议使用。 该if还可以有一个else条款，将在案件条件的计算结果来执