v-for中怎么判断渲染条件

Question

怎么根据type类型 渲染 服务1和服务2其中的一个

<tr v-for="i in orderList">
    <td>{{i.billNum}}</td>
    
    <td v-if="i.type == 1">服务1</td>
    <td v-if="i.type == 2">服务2</td>
    
    <td>1000.00</td>
    <td>2020-10-10 12:30:30</td>
    <td>待支付</td>
    <td class="c-cz-td">
        <div class="call">
            <a href="">下载</a>
        </div>
    </td>
</tr>

Answer 1

v-if v-else

Answer 2

噢我明白你意思了，你要的是这样吧

<div id="app">
    <ul>
        <li v-for="it in list" :key="it.label">
            <template v-if="it.type === 1">
                <span>{{ it.label }}</span>
                <span>类型 {{it.type}}</span>
            </template>
        </li>
    </ul>
</div>

Answer 3

你这 v-if 的部分没有问题啊？！

https://codepen.io/jamesfancy...

不过 v-for 中没有指定 :key，应该会有警告，把 :key 指定给一个可以标识元素唯一的属性（不要是 v-for 的 index）

Answer 4

三元表达式也是蛮香的
＜td＞{{i.type==1?＇服务1'：＇服务2'}}＜/td＞