使用Vue对列表选中项标色

今天学习Vue的时候，要做一个作业，就是给一个数组，遍历数组显示出来，并对选中的项标色。大概如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .selectClass {
            color: red
        }
    </style>
</head>
<body>
    <!-- #Vue对象 -->
    <div id="app" v-cloak>
        <ul>
<!--v-bind:class="{selectClass:index==selectIndex}"的逻辑是，如果选中的index和我们通过方法传递过去赋值之后的selectindex一样，就为true，不一样就为false--!> <li v-for="(m,index) in movies" v-on:click="liClick(index)" v-bind:class="{selectClass:index==selectIndex}">{{m}}</li> </ul> </div> <script src="../Vue/vue.js"></script> <script> //let 变量 const常量 //变成范式：声明式编程 const app = new Vue({ el: '#app',//用于挂载要管理的元素 data: { movies: ['教父', '美国往事', '肖申克的救赎', '海上钢琴师'], selectIndex: -1 }, methods: { liClick(index) {
//将传过来的Index赋值给我们定义的selectIndex
                    this.selectIndex = index;
                }
            }
        })

    </script>
    <!-- #endregion -->
</body>
</html>

　　

 

posted @ 2020-07-08 22:01  游园惊梦、  阅读(503)  评论(0)  编辑  收藏  举报