1. 程式人生 > >vue中的if標籤使用,select標籤使用

vue中的if標籤使用,select標籤使用

//注意:字串的相等判斷要用雙引號。v-if="site.stageNum !== '全款'
<tbody>
    <%-- 專案分期付款資訊列表--%>
    <tr v-for="(site,index) in payStageList">
        <td style="vertical-align: middle">{{index+1+(currentPage-1)*10}}</td>
        <template v-if="site.stageNum !== '全款'">
            <td style="vertical-align: middle">{{site.stageNum}}</td>
        </template>
        <td style="vertical-align: middle">{{site.needPay}}</td>
        <td style="vertical-align: middle">{{site.realPay}}</td>
        <td style="vertical-align: middle">{{site.needDate}}</td>
        <td style="vertical-align: middle">{{site.realDate}}</td>
        <td style="vertical-align: middle">{{site.status}}</td>
        <template v-if="site.stageNum !== '全款'">
            <td class="center" style="vertical-align: middle">
            <a href="javascript:void(0)" v-on:click="editStageInfo(site.sn)" class="btn btn-info btn-outline btn-sm">
                <i class="fa fa-edit"></i>修改3
            </a>
            <a href="javascript:void(0);" v-on:click="doDeleteStageRow(site.sn)" class="btn btn-danger btn-outline btn-sm">
                <i class="fa fa-times"></i>刪除3
            </a>
        </td>
        </template>
        <template v-if="site.stageNum == '全款'">
            <td  class="center" style="vertical-align: middle">
            <a href="javascript:void(0)" v-on:click="editAllInfo(site.sn)" class="btn btn-info btn-outline btn-sm">
                <i class="fa fa-edit"></i>修改2
            </a>
            <a href="javascript:void(0);" v-on:click="doDeleteAllRow(site.sn)" class="btn btn-danger btn-outline btn-sm">
                <i class="fa fa-times"></i>刪除2
            </a>
            </td>
        </template>
    </tr>
</tbody>


<select id="stageNum2" v-model="stageNum" class="form-control">
    <option value="">期數選擇</option>
    <option  v-for="stage in optionsNeed.stagesInfo" :value="stage.sn" >{{stage.name}}</option>
</select>