下拉選單顏色測試

下拉選單顏色測試

by cactus77kiki

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
 <h2>
 Todos
 </h2>
 <select style="color:blue;">
   <option v-for="(item,index) in todos"      
   v-bind:value="index==0?item.val='NN':item.val"
   v-bind:class="[(item.c == 'Y') ? 'blue' : 'black']">
   {{item.text}}
   </option>
 </select>
</div>

<!--v-bind:style="index==0? 'color:blue;': 'color:black;'"-->

CSS

.blue {
  color: blue;  
}
.black {
  color: black;
}

JavaScript

new Vue({
	el: "#app",
  data:{
  	todos:[
    	{text:"請選擇",val:"A",done:false,c:"Y"},
      {text:"learn vue",val:"B",done:false,c:null},
      {text:"play around in js",val:"C",done:true,c:null},
      {text:"build something awesome",val:"D",done:true,c:null}
    ]
  },
  methods:{
  	toggle:function(todo){
    	todo.done = !todo.done;
    }  
  }
});