如何在vue js的选择选项中设置动态样式

Question

<select v-model="selectcurrency"
   @change="[get(),ready(),setcookie()]"
   class="selectpicker"
   data-live-search="true"
   data-width="120px"
   style="width: 80px;">
      <option v-for="item in currency" :value="item"
         :style="color:'red'" //this style>
            @{{item.symbol}} -- @{{ item.name }}
      </option>
</select>

我需要带有item.count的option标签，如果item.count > 0它将其着色为黑色，如果item.count < 0将其着色为红色。

然后是带有item.image的option标签中的图像，但这不起作用

data-subtext="<img src='item.icon' class='img img-circle img-thumbnail'>"

Answer 1

您可以将类和样式绑定与三元运算符一起使用

在你的情况下：

 <option v-for="item in currency" :value="item" :style="{ color: item.count > 0 ? 'red' : 'black'" //use like this> @{{item.symbol}} -- @{{ item.name }} </option>