Question

所以我在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> 但它显然有错误的语法。

任何帮助将不胜感激！

Answer 1

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

在摘录中，我已经完成了两个不同类别的虚拟数据和颜色更改，但您应该明白这一点。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

将Dynamic类与Vue.js中的数据绑定器混合

1 个答案: