第一个作业:遍历列表,默认第一个元素显示为红色,其他的元素点击后变红_usrname为username的博客-爱代码爱编程
关键代码:
<ul>
<li v-for="(item,index) in quets"
:class="{active: currentIndex===index}"
@click="liClick(index)">
{{index}}.{{item}}
</li>
</ul>
全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<!--遍历列表,第一个元素显示为红色,其他的元素点击后变红-->
<div id="app">
<ul>
<li v-for="(item,index) in quets"
:class="{active: currentIndex===index}"
@click="liClick(index)">
{{index}}.{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data://注意此处的花括号
{
quets:["why","when","how","where"],
currentIndex:0
},
methods:{
liClick(index)
{
this.currentIndex=index
}
}
},
)
</script>
</body>
</html>