利用Vue的v-for和v-bind實現列表顏色切換

阿新 • • 發佈：2020-07-19

需求：

在頁面上顯示四個列表，初始時字型為黑色。

滑鼠點選某一個列表時，該列表的顏色變為紅色，其餘列表仍為黑色。

程式碼實現：

<!-- css -->
<style>
 .red{
 color: red;
 }
</style>

<!-- html -->
<div id="app">
 <ul>
 <li v-for="item,index in movies" :class="{red: changeRed == index}" v-on:click="change(index)">{{item}}</li>
 </ul>
</div>

<!-- JavaScript -->
<script src="../JS/vue.js"></script>
<script>
 const app = new Vue({
 el: '#app',data: {
 movies: ['肖申克的救贖','泰坦尼克號','當幸福來敲門','流浪地球'],changeRed: -1
 },methods: {
 change:function (index) {
 this.changeRed=index;
 }
 }
 })
</script>

程式碼解釋：

首先瀏覽器直接顯示列表，因為此時沒有監聽到click事件。

當滑鼠點選某一個列表時，Vue自動獲取列表下標，並執行change(index)函式，改變changeRed的值，此時當前列表的v-bind:class="{red: changeRed == index}"中的red為true，當前一項列表顯示為紅色。其餘列表的changeRed == index為false，所以不顯示紅色。

補充知識：vue學習(繫結class、v-bind:style(物件語法、陣列語法))

vue 屬性繫結

css

 .class0{
 color: red;
 font-size: 10px;
 }

 .class00{
 color: blue;
 font-size: 70px;
 }

 .class2{
 color: yellow;
 font-size: 30px;
 }

 .class3{
 color: indianred;

 }

 .class4{
 font-size: 30px;
 }

1 class繫結

1.1 字串繫結

<div id="app1">
 可以繫結一個預設class 字串繫結class
 <p class="class0" :class="a"> xxxx是字串 </p>

 <button @click="updates1"> 點選</button>
</div>

 // 1.1 字串繫結
 var a = new Vue({
 el:'#app1',data: {
  //繫結預設css屬性
  a: "class1",b:"class0",},//動態切換css屬性
  methods: {
  updates1 (){
   this.a = 'class2'

  }
  }
 });

1.2 物件繫結和陣列繫結

<div id="app2">
 物件繫結class
 <p :class="{class2:isA,class00:isB}"> xxxx是物件 例如 :class="{class2:isA,class00:isB}"</p>

 <button @click="updates2"> 點選</button> <br>

 陣列繫結class <br>
 <p :class="['class3','class4']"> xxxx是陣列 例如 :class="[class3,class4]" </p>

</div>

 //1.2 物件繫結
 var a = new Vue({
 el:'#app2',data: {
  //繫結預設css屬性
  isA: true,isB: false,//動態切換css屬性
 methods: {
  updates2 (){
  this.isA = false;
  this.isB = true;
  }
 }


 });

圖示

利用Vue的v-for和v-bind實現列表顏色切換

點選後

利用Vue的v-for和v-bind實現列表顏色切換

2 style 繫結


<div id="app3">
 <div :style="{ color: activeColor,fontSize: fontSize + 'px' }">Style 繫結1 例如 :style="{ color: activeColor,fontSize: fontSize + 'px' }"</div>
 <div :style="objectCssStyle">Style 繫結2(繫結到一個樣式物件通常更好) 例如 :style="objectCssStyle"</div>
 <div :style="[clSty1,clSty2]">Style 繫結3(陣列語法) 例如 :style="[activeColor,fontSize]"</div>

 <button @click="updates4"> 點選</button>
</div>


 // 2 style 繫結
 var a = new Vue({
 el:'#app3',data: {
  //繫結預設css屬性
  activeColor: 'red',fontSize: 100,objectCssStyle:{
  color: 'red',fontSize: '10px'
  },objectCssStyle2:{
  color: 'yellow'
  },clSty1: {
  color: 'green',fontSize: '30px'
  },clSty2: {
  'font-weight': 'bold'
  }


 },//動態切換css屬性
 methods: {
  updates4 (){
  this.activeColor = "blue";
  this.fontSize = 20;
  this.objectCssStyle = this.objectCssStyle2

  }
 }

 });

圖示

利用Vue的v-for和v-bind實現列表顏色切換