Vue 表格调用数据显示

Vue 表格数据绑定通常是通过 v-bind 指令来实现的。例如，在 Vue 实例中有一个数据属性为 data，我们可以在模板中使用 v-bind 指令来将数据属性绑定到表格中：

```
<table>
<thead>
<tr>
<th>产品名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td>{{ item.goodsname }}</td>
<td>{{ item.price}}</td>
</tr>
</tbody>
</table>
```

在上面的代码中，v-for 循环遍历数据属性 data 并将每个数据项绑定到表格的一行中。v-bind 指令用于绑定 key 属性，避免出现重复 key 的警告，同时也可以绑定其他属性，如 class 和 style 等。

在 Vue 中还可以使用 computed 计算属性来对数据进行处理和过滤，然后将处理后的数据绑定到表格中。例如：

```
<table>
<thead>
<tr>
<th>产品名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filteredData" :key="item.id">
<td>{{ item.goodsname }}</td>
<td>{{ item.price }}</td>
</tr>
</tbody>
</table>
```

在上面的代码中，使用 computed 计算属性 filteredData 对数据进行过滤和处理，然后将处理后的数据绑定到表格中。这样就可以实现数据的动态显示和过滤了。