今天学习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>
