技術標籤：vue.js

                     Vue  點選列表中某一個變色案例

v-bind v-for v-on的使用

題目要求：

完成一個有序列表，滑鼠點選其中某一項，該項字型顏色變紅

html.

<div id="app">
            <ul>
                <li v-for="(movie,index) in movies":class="{active:index===getIndex}"v-on:click="onClick(index)"
 
> {{index}}--{{movie}}</li>
            </ul>
        </div>

將點選事件獲取到的Index的值附給getIndex,此時Index與getIndex相等觸發active，點選的項變色，

也可將getIndex的值直接附為空,這樣初始頁面將沒有紅色的專案

js

const vm = new Vue({
                el: '#app',
                data: {
                    isActive: true,
                    getIndex:
 
 0,
                    movies: ['初吻','海上鋼琴師','教父','以你的名字呼喚我']
                },
                methods: {
                    onClick:function(index){
                        this.getIndex = index;
                    }
                }
            })

css

.active{
                color: red;
            }
 

執行效果

原始效果

點選’海上鋼琴師‘後的效果

小菜鳥提醒您：如果有不對的地方歡迎提醒本菜鳥呀！