v-for,v-bink,綜合案例

我要學web發表於2020-12-19

要求：第一個li顯示紅色，之後點選哪個li哪個li就變成紅色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
         color: red;
         
         }
         .o{
cursor: pointer;
         }
    </style>
</head>
<body>
    <div id="div">
      <ul>
          <li v-for="(items,index) in li"  :class="{one:currentIndex===index}" v-on:click="cli(index)" class="o">
                  {{items}}
          </li>
      </ul>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
const div = new Vue({
   el:'#div',
   data:{
      li:['祝你','萬事勝意','祝你','前程似錦','一帆風順'],
      isone:true,
      currentIndex : 0
    },
      methods:{
          cli:function(index){
            this.currentIndex=index
          }
   }

})

</script>

在這裡插入圖片描述
在這裡插入圖片描述

 methods:{
          cli:function(index){
            this.currentIndex=index
          }
   }

把每個li的index傳入這個函式中讓currentlindex等於點選的這個li的index值

:class="{one:currentIndex===index}

這個當one：ture時就顯示這個樣式，one:currentIndex===index當哪個li的索引跟currentlindex所匹配就相當於true其他的九尾flash為true的就變紅，為flash的就不變紅

如果:class="{one:true}的話每個li都是true所以每個li都變紅，每個li的索引值不同，可以利用他們不同的索引來控制他們的顏色

相關文章