Vuejs2多重中频条件

Question

我希望将我的php代码转换为vuejs2代码，因为我正在将我的管理面板更改为vue应用程序(只有ui)。我正在跟踪这些文档，https://v2.vuejs.org/v2/guide/conditional.html

这是我的art.vue组件

   <template>
    <div class="col-md-8">
        <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">Latest Artworks</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="box-body">
            <div class="table-responsive">
                <table class="table no-margin">
                    <thead>
                        <tr>
                          <th>ID</th>
                          <th>Art</th>
                          <th>Artist</th>
                          <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in art">
                            <td>
                                <a href="{{URL::route('arts',['id' => $art->id])}}">ART-{{ $art->.id }}</a>
                            </td>
                            <td>{{ item.title }}</td>
                            <td>{{ item.artist.name }}</td>
                            <td>
                              <span class="label 
                                    <?php 
                                    if(item.status == "Pending")
                                      echo 'label-warning';
                                    elseif($art['status'] == "Approved")
                                      echo 'label-success';
                                    else
                                      echo 'label-danger';
                                    ?>
                                ">{{$art['status']}}</span> </td>
                            <td>
                              <div class="sparkbar" data-color="#00a65a" data-height="20"><canvas width="34" height="20" style="display: inline-block; width: 34px; height: 20px; vertical-align: top;"></canvas></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="box-footer clearfix">
            <a href="{{URL::route('arts')}}" class="btn btn-sm btn-primary btn-flat pull-right">View All</a>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    computed : {
        latest(){
            return this.$store.state.art.latest
        }
    }
}
</script>

我看过v-if条件声明，但在我的例子中，我有多个条件。

我想更改这段代码

<span class="label 
    <?php 
    if($art['status'] == "Pending")
      echo 'label-warning';
    elseif($art['status'] == "Approved")
      echo 'label-success';
    else
      echo 'label-danger';
    ?>
">{{$art['status']}}</span>

Answer 1

您可以使用v-else-if轻松地实现多个条件视图。请参阅此处的文档。

编辑：查看代码示例，它认为不需要v-if。向元素添加类可以通过属性绑定的方式来完成。

<span class="label 
  <?php 
    if(item.status == "Pending")
      echo 'label-warning';
    elseif($art['status'] == "Approved")
      echo 'label-success';
    else
      echo 'label-danger';
   ?>
">{{$art['status']}}</span>

可以写成：

<span :class='{label: true, "Pending": item.status === 'value', "label-warning": item.status === 'someOtherValue'}'>{{$art['status']}}</span>

在vuejs中也有相同的效果，阅读更多。

Answer 2

<span v-if="item.status === 'Pending'" class="label label-warning">
    {{ item.status }}
</span>
<span v-else-if="item.status === 'Approved'" class="label label-success">
    {{ item.status }}
</span>
<span v-else class="label label-danger">
    {{ item.status }}
</span>

这解决了我的问题