我想将我的php代码转换为vuejs2代码,因为我将我的adminpanel更改为vue应用程序(仅限ui)。 我遵循此文档,https://vuejs.org/v2/guide/conditional.html
这是我的art.vue组件
{"one":16,"two":64,"three":4}
我见过v-if条件声明,但在我的情况下我有多个条件
我想更改此代码
<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>
答案 0 :(得分:1)
您可以使用v-else-if
轻松实现多个条件视图。请参阅此处的documentation。
编辑:查看代码示例,感觉不需要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
中的效果相同,read more。
答案 1 :(得分:-1)
<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>
这解决了我的问题