<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app" v-cloak>
            <div>
                <ul>
                    <li v-for="(a,i) in movies" v-on:click="addClass(i)" :class="{bian:current==i}">{{i}}-{{a}}</li>
                </ul>
            </div>
        </div> 
        <style>
            .bian{
                color: red;
            }
        </style>
        <script>
            const app = new Vue({
                el: '#app',
                data:{
                    current:0,
                    bian:'bian',
                    movies:['葫芦娃兄弟','海绵宝宝','变形金刚','黑猫警长']
                },
                methods:{
                    addClass:function(i){
                        this.current=i;
                    }
                }
            })
        </script>
    </body>
</html>
最后修改:2020 年 12 月 01 日 04 : 38 PM