VUE 点击列表中哪一项,哪一项的文字就变红色
使用三元表达式判断,当count值等于下标值时,该项的类名为active,否则为空<div id="app"><ul><li v-for="(m,index) in movies" :class="count==index ?'active':''" @click='change(index)'>{{m}}</li>&l...
·
使用三元表达式判断,当count值等于下标值时,该项的类名为active,否则为空
<div id="app">
<ul>
<li v-for="(m,index) in movies" :class="count==index ? 'active' :''" @click='change(index)'>{{m}}</li>
</ul>
</div>
在style中给出自己需要的样式
<style type="text/css">
.active{
color: #FF0000;
}
</style>
script语法
给定count值为-1,如果给count赋值为0,列表第一项会是红色
<script type="text/javascript">
const app = new Vue ({
el:'#app',
data:{
count:-1,
message:'您好啊',
movies:['海王','冰雪奇缘','星际穿越','少年派']
},
methods:{
change:function(index){
this.count = index;
}
}
})
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)