Question

我正在使用以下代码来呈现通用表：

    <tr v-for="row in filteredData"  >
        <td v-for="column in visibleColumns">
            <span v-if="column.type=='Date'" :class="column.cssClass">{{row[column.field] | formatDate}}</span>
            <span v-else-if="column.type=='Bool'" :class="column.cssClass"><input  @change="genericPost(column.url,row)" class="w3-check" type="checkbox"  v-model="row[column.field]" ></span>
            <span v-else-if="column.type=='Decimal'" :class="column.cssClass">{{row[column.field] | formatPrice}}</span>
            <span v-else-if="column.type=='Button'" :class="column.cssClass"><a  @click="clickItem(column.url,row)" class="w3-button w3-blue w3-padding-small">Edit</a></span>
            <span v-else-if="column.type=='Link'" :class="column.cssClass"><router-link :to="{ path: row.route  }">{{row[column.field]}}</router-link></span>                    
            <span v-else :class="column.cssClass">{{row[column.field]}}</span>
        </td>

    </tr>

有没有办法从条件渲染中删除span元素？要简单 <td class="xxx">value</td> 不是<td><span class="xxx">value</span></td>

Answer 1

您可以将v-for用于子标记或子<template>标记。

 <tr v-for="row in filteredData" >
     <td v-for="column in visibleColumns" :class="column.cssClass">
        <template v-if="column.type=='Date'">{{row[column.field] | formatDate}}</template>
        <template v-else-if="column.type=='Bool'" ><input  @change="genericPost(column.url,row)" class="w3-check" type="checkbox"  v-model="row[column.field]" ></template>
        <template v-else-if="column.type=='Decimal'" {{row[column.field] | formatPrice}}</template>
        <template v-else-if="column.type=='Button'" ><a  @click="clickItem(column.url,row)" class="w3-button w3-blue w3-padding-small">Edit</a></template>
        <template v-else-if="column.type=='Link'" ><router-link :to="{ path: row.route  }">{{row[column.field]}}</router-link></template>
        <template v-else >{{row[column.field]}}</template>
     </td>
 </tr>

在文档中：https://vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt和https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

仅供参考，它似乎没有记录，但似乎您也可以使用<slot>标记代替v-for <template>标记。因为我知道没有隐藏的＆＃34;陷阱＆＃34;使用模板标签我只是使用它。

Vue v-if并删除span

1 个答案: