首页 > 其他 > 详细

vue v-for的列表,点击某个li添加样式

时间:2020-03-19 11:49:49      阅读:786      评论:0      收藏:0      [点我收藏+]

直接贴码

技术分享图片

技术分享图片

 

技术分享图片

1 <template>
 2  <div>
 3   <ul class="resultList" v-for="(item,index) in standardData">
 4    <li @click="setCenter(index)" :class="{selectedColor:selectIndex === index}" ></li>
 5   </ul>
 6 </div>
 7 </template>
 8 <script>
 9 export default {
10     data(){
11       return{
12         standardData:[],
13         selectIndex:null  //搜索结果,被选中的li index
14       }
15     },
16  methods:{ 
17    setCenter(index) {
18       this.selectIndex = index;
19    }
20 }
21 </script>
22 <style lang="scss">
23    .selectedColor{
24         color:#4b7dff;
25         background-color: #f6f6f6;
26    }
27 </style>

 setCenter方法内的item是因为项目需要才传的,如果只是单纯的给li增加样式,则为setCenter(index)

 

vue v-for的列表,点击某个li添加样式

原文:https://www.cnblogs.com/chr506029589/p/12522780.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!