大家好,欢迎来到IT知识分享网。
三目表达式
语法为: 条件表达式?表达式1:表达式2
它的逻辑是根据前面判断条件,如果为真,则执行第一个;如果为假,则执行第二个。
<div class="check-part" style="overflow:auto;" > <a-checkbox v-for="(item,index) in list" :key="index" style="display:block; padding:10px" :checked="item.check" @change="onChangeA(item,index)"> <a-button type="link" style="border:1px #1890ff solid; " :style="{ 'color' : activeId == item.id ? 'black': ''}" @click="changeButton(item)" > {{item.fileName}} </a-button> </a-checkbox> <a-button type="primary" @click="add" class="add" > <!-- <a-button type="primary" @click="showModal" style="width:80px;top:240px;left:140px"> --> 添加目录 </a-button> <a-modal v-model="visible" title="目录" ok-text="确认" cancel-text="取消" @ok="hideModal"> <a-input placeholder="请输入目录名" v-model="fileName" /> </a-modal> </div>
其中, <a-button type=”link” style=”border:1px #1890ff solid; ” :style=”{ ‘color’ : activeId == item.id ? ‘black’: ”}” @click=”changeButton(item)” > 用的就是三目表达式,对按钮的按钮的颜色进行判断。
如果,activeId ==item.id 那么按钮的颜色则为black,否则,则为原来的颜色。
通过三目表达式可以很大程度上减少代码冗余问题。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/31372.html