Vuejs2 多个 if 条件

Question

我想将我的 php 代码转换为 vuejs2 代码，因为我正在将我的管理面板更改为 vue 应用程序（仅 ui）。我正在关注此文档，https://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 轻松实现多个条件视图。参考这里的documentation。

编辑：看代码示例感觉不需要v-ifs。可以通过属性绑定的方式向元素添加类。

<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中为了同样的效果，read more.

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>

这解决了我的问题

Vuejs2 多个 if 条件

Vuejs2 multiple if condition

laravel-5.3

vuejs2