Vue.js：这些信息从何而来？答案

【问题标题】：Vue.js: where does this info come from?Vue.js：这些信息从何而来？
【发布时间】：2018-08-13 12:21:02
【问题描述】：

我正在关注 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 中声明。

【问题讨论】：

标签： vue.js axios

【解决方案1】：

v-for="currency in info"

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

在具有v-for 的index.html 文件中查看。如果他将info 的每个元素分配给currency。在mounted中将一个对象数组分配给info

查看更多关于 JavaScript for/in 声明 here

【讨论】：