如何在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>

I need the option tag with item.count where it will color it black if item.count > 0 and color it red if item.count < 0 .

Then an image in option tag with item.image but this doesn't work

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

Answer 1

You can use Class And Style Bindings with Ternary Operator

In your situation:

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