vue指令v-show的使用
1、判断谋个元素是否显示或隐藏
<el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">去上传<i class="el-icon-upload el-icon--right"></i></el-button>
通过接口里的参数list.power是否等于1,如果等于1,则为“true”,否则为“false”,然后v-show指令,等于true的时候显示,false的时候隐藏。
2、三目运算符判断
<a class="warn" v-show="true ? item.ai != null : item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>
其实这个也可以简写成第一种形式
<a class="warn" v-show="!item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>
3.v-show 使用函数
<!-- 评论列表数据 -->
<div class="rating-wrapper">
<ul>
<li class="rating-item" v-for="(rating,index) in ratings" :key="index" v-show="needShow(rating.rateType,rating.text)">
<h1>哈哈哈</h1>
</li>
</ul>
</div>
const POSITIVE = 0; // 满意
const NEGATIVE = 1; // 不满意
const ALL = 2; // 全部查看
var vm = new Vue({
el: '#app',
data: {
selectType:1, // 评价类型
onlyContent: false, // 只看有内容的评论
},
methods: {
// 显示隐藏评论———根据切换查看评论的类型动态渲染
needShow(type,text){
// 参数:评论类型和评论内容
if(this.onlyContent && !text){
// 只看有内容和的评论
return false;
}else if(this.selectType===ALL){
// 全部查看
return true;
}else {
// 评论类型相同就查看
return type===this.selectType;
}
}
}
});