Question

我正在遵循Vue.js文档并运行this example。

这是 index.html 文件：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>

        <div id="app">
            <h1>Bitcoin Price Index</h1>
            <div v-for="currency in info" class="currency" >
                {{ currency.description }}:
                <span class="lighten">
                    <span v-html="currency.symbol"></span>
                    {{ currency.rate_float | currencydecimal }}
                </span>
            </div>
        </div>        
        <script src="index.js"></script>
    </body>
</html>

这是 index.js ：

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response.data.bpi))
  },

  filters: {
  currencydecimal (value) {
    return value.toFixed(2)
  }
},
})

输出：

（您可以将上面的代码复制粘贴到here中）

问题：在index.html中，我不知道{{ currency.description }}的来源。 currency甚至没有在Vue（）实例的data中声明。

Answer 1

在您的 .html 文件中将其定义为v-for="currency in info"

Answer 2

v-for="currency in info"

此属性currency是info数组的元素之一。

Answer 3

在 index.html 文件中看到带有v-for的文件。万一他将currency的每个元素分配给info。已将对象数组分配给已安装的info

在声明here中查看有关JavaScript的更多信息

Vue.js：此信息来自何处？

3 个答案: