表

Question

我有一个填充vue的表格，我想在有数据时显示行，或者如果没有数据则显示“无结果”的行。以下是jsfiddle的基本概述：https://jsfiddle.net/ox0ozs5g/1/。

为什么即使满足v-else条件，v-if行仍会继续显示？

Answer 1

不幸的是，v-if和v-for无法合作。您可以将v-if提高一级，如下所示：

<tbody v-if="my_tasks.length">
    <tr id="retriever-task-{{ index }}" v-for="(index, task) in my_tasks" >
        <td>{{ task.id }}</td>
        <td>{{ task.type }}</td>
        <td>{{ task.frequency }}</td>
        <td>{{ task.status }}</td>
        <td><i v-on:click="deleteTask(index, task.id)" class="fa fa-trash"></i></td>
    </tr>
</tbody>
<tbody v-else>
    <tr>
        <td colspan="6">No tasks found.</td>
    </tr>
</tbody>

您还可以使用伪元素template：

<template v-if="my_tasks.length">
    <tr id="retriever-task-{{ index }}" v-for="(index, task) in my_tasks" >
        <td>{{ task.id }}</td>
        <td>{{ task.type }}</td>
        <td>{{ task.frequency }}</td>
        <td>{{ task.status }}</td>
        <td><i v-on:click="deleteTask(index, task.id)" class="fa fa-trash"></i></td>
    </tr>
</template>
<template v-else>
    <tr>
        <td colspan="6">No tasks found.</td>
    </tr>
</template>

Answer 2

来自Vuejs文档“v-else元素必须紧跟v-if或v-show元素 - 否则将无法识别。” - https://vuejs.org/guide/conditional.html。看起来v-if之后的附加vue数据绑定属性正在打破它（例如v-for和v-on）。

您可以使用v-show代替。例如：

    <tr v-show="!my_tasks.length">
      <td colspan="6">No tasks found.</td>
    </tr>

Answer 3

yariash关于 let aString: String = "href=http://www.corpbpl.com/groupinfo.php?show=95 onmousedown=uaction(this,{up:'90de%=%Nofi7rO6B&l=8upb1p&E%=6&ex=jXTDh5zYQLa9&});" var arr = aString.componentsSeparatedByString(" ") let newStr = arr[0] as String var resultStr = newStr.stringByReplacingOccurrencesOfString("href=", withString: "") 和v-if是正确的。您可以按照他的建议执行，或者只需将v-for更改为v-else的反面，即v-if。