javascript - 使用 VUE.js 加载内容

Question

我正在尝试使用 vue.js 呈现 2 条消息，但它似乎不会在 FE 上加载？

<template v-for="item in items">
    <span>{{ afterpayMessage }}: {{ item.price }} with AfterPay</span>
</template>

<script>
  var afterpay = new Vue({
  el: '#afterpay',
  data: {
    afterpayMessage: 'Or 4 payments of',
    items: [
      { price: {{ product.price | money_with_currency | json }} },
    ]
  }
})
</script>

我曾尝试使用以下代码，建议包含返回函数，但呈现的只是“with afterpay”文本，而不是模板。

<div id="afterpay" v-for="item in items">
    {{ afterpayMessage }}: {{ item.price }} with AfterPay
</div>

<script>
  var afterpay = new Vue({
  el: '#afterpay',
    data: function () {
      return {
        afterpayMessage: 'Or 4 payments of',
        items: [
          { price: {{ product.price | money_with_currency | json }} },
         ]
      }
    }
});
</script>

标签： javascriptvue.jsobject

Answer 1

你可以使用这种数据格式

data: function () { return { afterpayMessage: '或 4 次付款', items: [ { price: {{ product.price | money_with_currency | json }} }, ] } }