v-if和v-else同时显示
v-if条件成立后v-else还是显示出来了
原代码
<span v-if="scope.row.prop === 'destination'">destination:{{scope.row.value}}</span>
<span v-if="scope.row.prop === 'destinationPort'">destinationPort:{{scope.row.value}}</span>
<span v-if="scope.row.prop === 'source'">source:{{scope.row.value}}</span>
<span v-if="scope.row.prop === 'sourcePort'">sourcePort:{{scope.row.value}}</span>
<span v-else>{{JSON.stringify(scope.row.value)}}</span>
修改后代码
<span v-if="scope.row.prop === 'destination'">destination:{{scope.row.value}}</span>
<span v-else-if="scope.row.prop === 'destinationPort'">destinationPort:{{scope.row.value}}</span>
<span v-else-if="scope.row.prop === 'source'">source:{{scope.row.value}}</span>
<span v-else-if="scope.row.prop === 'sourcePort'">sourcePort:{{scope.row.value}}</span>
<span v-else>{{JSON.stringify(scope.row.value)}}</span>
解决的话很简单, 中间不要v-if而是v-else-if. 后端习惯了不去用else-if, 比较难看. 前端也这么写结果就出错了.
原因
原因也很简单, v-else是对着上方的v-if来确定自己的条件的所以原来的代码在vue的理解中其实是像这样的
<div>
<span v-if="scope.row.prop === 'destination'">destination:{{scope.row.value}}</span>
<span v-if="scope.row.prop === 'destinationPort'">destinationPort:{{scope.row.value}}</span>
<span v-if="scope.row.prop === 'source'">source:{{scope.row.value}}</span>
</div>
<div>
<span v-if="scope.row.prop === 'sourcePort'">sourcePort:{{scope.row.value}}</span>
<span v-else>{{JSON.stringify(scope.row.value)}}</span>
</div>
也就是说v-else是一个专情的渣男, 他可以同时看到多个v-else-if但只能盯着一个v-if, 就是离它最近的那个