vue中v-if和v-else同时生效

今天终于看到了不加班的希望，刚好今天解决了一个简单但是容易套进去的问题，跟大家分享一下，

产生问题：下面代码v-if和v-else同时生效两个

<el-table-column   label='身份证' width='200'>
	<template slot-scope='scope'>
		<span  prop='card' v-if='scope.row.OBJECTID' @click="openNewPage(scope.row.OBJECTID)">{{scope.row.card}}<i class='el-icon-document'></span>
		<span prop='card' v-if='scope.row.objectId' @click="openNewPage(scope.row.objectId)">{{scope.row.card}}<i class='el-icon-document'></span>
		<span  prop='card' v-if='scope.row.objectid' @click="openNewPage(scope.row.objectid)">{{scope.row.card}}<i class='el-icon-document'></span>
		<span  prop='card' v-else>{{scope.row.card}}</span>
	</template>
<el-table-column>

解决代码：

<el-table-column   label='身份证' width='200'>
	<template slot-scope='scope'>
		<span  prop='card' >{{scope.row.card}}
		<i class='el-icon-document' v-if='scope.row.OBJECTID' @click="openNewPage(scope.row.OBJECTID)" style='cursor:pointer'>
		<i class='el-icon-document' v-if='scope.row.objectId' @click="openNewPage(scope.row.objectId)" style='cursor:pointer'>
		<i class='el-icon-document' v-if='scope.row.objectid' @click="openNewPage(scope.row.objectid)" style='cursor:pointer'>
		</span>
	</template>
<el-table-column>

解决思想：刚开始写代码的时候套进去了，一直用v-if和v-else判断span标签的显示与不显示，但发现，v-if没问题会生效一个，但是v-else也会生效,达不到想要的效果，后来搜索v-if与v-else为何同时会生效,好久也没找到问题的所在，喝了杯水冷静了一会之后，发现我想显示或者不显示的并不是全部的span标签内容,只是想判断是否满足条件，是否要在span的内容后面跟一个icon图标，所以干脆只用v-if来判断是否满足条件，满足条件就显示icon图标，不满足条件就不显示，这样的话就不会冲突了，而且实现了想要的效果。（上文所说的图标是element-ui的图标，用i标签来定义，通过class名不同来区分不同的图标），icon的点击事件跟此段代码没有关系，只是一个普通的事件。`

解释一下上面代码中的部分标签及属性的含义：

<el-table-column   label='身份证' width='200'>

<el-table-column>:element-ui的列元素
label='身份证':身份证列，表头文字为“身份证”

<template slot-scope='scope'>

<template>:HTML5提供的新标签，更加规范和语义化，内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。template标签天生不可见，它设置了display:none;属性。
slot-scope='scope':作用域插槽，获取当前行的数据。vue官方提供的说法是：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。简单的说，就是父组件中不能直接用自组件中定义的data数据。而slot-scope的出现就是解决了这样的问题。

<span prop='card' >{{scope.row.card}}

prop='card':当前列要渲染的元素是tableData.card的数据

<i class='el-icon-document' v-if='scope.row.OBJECTID' @click="openNewPage(scope.row.OBJECTID)" style='cursor:pointer'>

<i class='el-icon-document>'</i>:element-ui提供的一个icon图标
v-if='scope.row.OBJECTID' :当满足if条件时渲染此标签
@click="openNewPage(scope.row.OBJECTID)" ：点击事件
style='cursor:pointer':鼠标移入出现小手状

(后来补充内容）
阅读官方文档后才发现自己从一开始就错了
也就是说，v-if和v-else要在同一级标签，并且v-else要跟在最后一个v-if后面的同级标签。