用一个方法返回多个vue类

我使用的是vue,在我的vue页面中,我有bootstrap药丸导航,我的页面有2个药丸,一个是 “批准”,另一个是 “拒绝”。我想做的是,如果你被拒绝了,那么你只能看到 “拒绝 “药丸,如果你被批准了,那么你可以看到 “批准 “药丸。

我遇到的问题是,我不知道如何才能返回2个类,因为bootstrap使用2个类来显示 “显示活动 “的信息,而我希望能够使用一个方法来显示这些类。

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" :class="showApprovedClass" id="pills-approved-tab" data-toggle="pill" href="#pills-approved" role="tab" aria-controls="pills-approved" aria-selected="true">Approved</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" :class="showDeclinedClass" id="pills-declined-tab" data-toggle="pill" href="#pills-declined" role="tab" aria-controls="pills-declined" aria-selected="false">Declined</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade" :class="showApprovedClass" id="pills-approved" role="tabpanel" aria-labelledby="pills-approved-tab">
    approved stuff
  </div>

  <div class="tab-pane fade" :class="showDeclinedClass" id="pills-declined" role="tabpanel" aria-labelledby="pills-declined-tab">
    Declined stuff
  </div>
</div>

export default {
    data() {
        show: false,
        active: false   
    },

    computed: {
        showDeclinedClass(){
            if(user.stage === 'declined'){
                return 'show active'
            }
        },
        showApprovedClass(){
            if(user.stage === 'approved'){
                return 'show active'
            }
        }
    }
}

解决方案:

你可以更新 ApprovedDeclined pill元素类一样。

<a class="nav-link" :class="getClass('approved')" .... >Approved</a>

<a class="nav-link" :class="getClass('declined')" .... >Declined</a>

然后创建一个新的方法,如:

methods:{
  getClass( stage ){
    return user.stage === stage ? 'show active' : '';
  }
}

演示。

new Vue({
  el: "#myApp",
  data: {
    user: { stage: 'approved' }
  },
  methods: {
    getClass(stage) {
      return this.user.stage === stage ? 'btn-primary' : 'btn-secondary';
    },
    toggle() {
      this.user.stage = this.user.stage === 'approved' ? 'declined' : 'approved';
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
  <div class="row">
    <div class="col">
      <button :class="getClass('approved')" class="btn btn-md btn-block m-3">Approved</button>
    </div>
    <div class="col">
      <button :class="getClass('declined')" class="btn btn-md btn-block m-3">Declined</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button class="btn btn-md btn-success m-3" @click="toggle()">Click Me!</button>
    </div>
  </div>
</div>

给TA打赏
共{{data.count}}人
人已打赏
未分类

uint8_t不能用cout打印。

2022-9-8 2:12:39

未分类

Averageifs使用索引匹配来动态选择整个列进行平均。

2022-9-8 2:12:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索