vue中v-if和v-else同时生效
今天终于看到了不加班的希望,刚好今天解决了一个简单但是容易套进去的问题,跟大家分享一下,产生问题:下面代码v-if和v-else同时生效两个<el-table-columnlabel='身份证' width='200'><template slot-scope='scope'><spanprop='card' v-if='scope.row.OBJECTID' @cl
今天终于看到了不加班的希望,刚好今天解决了一个简单但是容易套进去的问题,跟大家分享一下,
产生问题:下面代码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后面的同级标签。
更多推荐
所有评论(0)