v-if和v-else同时显示

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, 就是离它最近的那个