<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue自学:课堂作业</title>
<style type="text/css">
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr"
:class="{active:num === index}"
v-on:click="btclick(index)">
{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
//课堂作业:
//实现数组的第一个是红色的
//之后点击其他的数组，其他的数组变色
//实现逻辑
//使用了计数变量 num
//:class是动态绑定方法
// === 返回的结果为真
// 在动态绑定中，使得数组索引结果0，对应初始num为零，实现了数组第一个显示的是红色的
// v-on:click方法中，设置了点击的num=index，所以实现了点击其他数组，其他数组也是红色的
const app = new Vue({
el:’#app’,
data:{
arr: [‘海王’,’超人’,’神奇女侠’,’蝙蝠侠’],
num:0
},
methods:{
btclick(index){
return this.num = index
}
}
})
</script>
</html>
