如何在vuejs中更改表的位置？

Question

目前如下：

事实上它就是这样的;

我遇到了麻烦，有人可以帮帮我吗？

这是源代码。

<div id="app">



        <table class="table">
            <thead>
              <tr>
                <th>Tipo de moeda</th>
                <th>Valor</th>
                <th>Referencia</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="bancodedados" v-for="(val, key) in bancodedados.valores" :key="key">
                <td> {{  val.nome }}  </td> 
                <td> {{  val.valor }}</td>
                <td>{{  val.fonte }}</td>
              </tr>
            </tbody>
          </table>




</div>

Answer 1

我认为您应该水平返回数据。否则你可以这样定义。

computed: {
  dolar () {
   return this.bancodedados.valores[0].valor;
 },
 euro () {
  return this.bancodedados.valores[1].valor;
 },
 btc () {
  return this.bancodedados.valores[2].valor;
 }
 ...
}

或者您可以使用created语句返回数据

data: {
  dolar: 0,
  euro: 0,
  btc: 0
},
created() {
  this.dolar = this.bancodedados.valores[0].valor;
  this.euro = this.bancodedados.valores[1].valor;
  this.btc = this.bancodedados.valores[2].valor
 ...
}

你的桌子在这两种情况下都应该这样

<table class="table">
 <thead>
   <tr>
     <th>Dola</th>
     <th>Euro</th>
     <th>BTC</th>
   </tr>
   </thead>
    <tbody>
     <tr>
      <td> {{ dolar }} </td>
      <td> {{ euro }} </td>
      <td> {{ btc }} </td>
     </tr>
    </tbody>
    </table>