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

【问题标题】：how to set dynamic style in select option in vue js如何在vue js的选择选项中设置动态样式
【发布时间】：2018-01-31 19:38:16
【问题描述】：

<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 把它涂成红色。

然后在option 标记中添加一个带有item.image 的图像，但这不起作用

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

【问题讨论】：

您不能设置选项的样式，因为它是由操作系统而不是浏览器呈现的，但是您可以轻松创建简单的下拉列表并设置样式，使其看起来完全像选择。

标签： javascript laravel vuejs2 bootstrap-selectpicker

【解决方案1】：

您可以将Class And Style Bindings 与Ternary Operator 一起使用

在你的情况下：

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

【讨论】：

坦克你为我工作你觉得这张照片怎么样？
这对我不起作用。样式被浏览器的默认样式覆盖