Vue實例——點擊v-for的某個元素，消除其它元素關聯

實現這樣的一個需求：使用v-for生成一個列表，點擊列表中的某個元素，該元素改變其樣式（也就是字體變紅），其它元素不變

解決方法

通過設置一個點擊事件btnClick(index)獲取點擊元素的下標，將被點擊的元素的下標與列表中元素進行匹配，相等的進行css渲染，這樣就避免了其它元素全部一起渲染。

這裏的active設置爲-1，是因爲如果是0或空的話，第一個元素就默認被渲染了樣式，也就是變紅色

    <style>
        .red {
            color: red;
        }
    </style>

	<div id="app">
        <ul>
            <li v-for="(m, index) in items" :class="active == index ? 'red' : ''" 
            @click="btnClick(index)">{{index}} - {{m}}</li>
        </ul>
    </div>

    <script type="text/javascript">

        new Vue({
            el: '#app',
            data: {
                items: ['喜羊羊', '美羊羊', '懶洋洋', '紅太狼', '灰太狼'],
                active: '-1'
            },
            methods: {
                btnClick: function (index) {
                    this.active = index;
                }
            }
        })

    </script>

效果