你不了解的v-show

原创
2018/07/16 16:30
阅读数 533

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;
          }
        }
    }
});

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部