|
是一个v-for,v-on:click,v-bind的结合体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.red{
color: red;
}
</style>
</head>
<body>
<ul id="aaa">
<li v-for="(item,index) in fruit"
:class="{red:currentindex===index} "
@click="change(index)">
{{item}}.{{index}}</li>
</ul>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
const aaa=new Vue({
el:'#aaa',
data:{
real:true,
fruit:['apple','banana','orange','peach'],
currentindex:0
},
methods:{
change(index){
this.currentindex=index
}
}
})
</script>
</body>
</html>
|