vue学习之实现列表点击选中 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .active{
                color:red;
            }
        </style>
    </head>
    <body>
        <!-- 需求：点击列表中的哪一项，该项为选中状态，选中状态为红色 -->
        <div id="app">
            <ul>
                <li v-for="(v,k) in movies" @click="active(k)" :class="{active:index == k}" >{{k}}-{{v}}</li>
            </ul>
        </div>
    </body>
</html>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // v-bind的语法糖 :src
    const app = new Vue({
        el:'#app',//决定vue挂载到哪个对象
        data:{
            movies:['大话西游','喜剧之王','喜剧之王','火影忍者','你的名字'],
            index:-1,
        },
        methods:{
            active:function(k){
                this.index = k;
            }
        }
    })
</script>

 

posted @ 2020-06-04 17:20  神女卑弥呼  阅读(1046)  评论(0)    收藏  举报