javascript - 在Vue.js中将Dynamic类与数据绑定(bind)器混合

所以我在HTML中有以下v-for：

<ul v-for="(item, index) in openweathermap.list">
    <li>{{item.dt_txt}}</li>
    <li>{{item.weather[0].description}}</li>
    <li>{{item.weather[0].id}}</li>
    <li>{{item.main.temp}}&deg;C</li>
</ul>

我想做的就是在这些信息中添加一个图标，例如超棒的字体。

所以我发现了这些：<i class="owf owf-200"></i>这将为我服务，但是数字必须动态变化。因此，数字是v-for中的{{item.weather[0].id}}。

我的问题是这个；如何将这两者混合在一起？

我尝试过这样的<i class="owf owf-{{item.weather[0].id}}"></i>
但显然语法错误。

任何帮助将不胜感激！

最佳答案

您可以使用v-bind:class-允许您附加两个字符串，就像在Javascript中一样。因此，该值应为'owf owf-' + item.weather[0].id。

在代码段中，我已经完成了针对两个不同类的虚拟数据和颜色更改的操作，但是您应该明白这一点。

var app = new Vue({
  el: "#app",
  data:{
    items: [
      {
        weather: [{ id: 200 }],
        txt: "Some text"
      },
      {
        weather: [{ id: 300 }],
        txt: "Some other text"
      }
    ]
  }
});

.owf.owf-200 {
  color: red;
}

.owf.owf-300 {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="app">
  <template v-for="item in items">
    <span v-bind:class="'owf owf-' + item.weather[0].id">
      {{ item.txt }}
    </span>
    <br />
  </template>
</div>