首页 > 其他 > 详细

vue循环数据点击变换颜色

时间:2019-12-07 12:30:49      阅读:176      评论:0      收藏:0      [点我收藏+]
<template>
    <div>
       <div v-for=‘(item,index) in arr‘ 
            v-bind:class=‘{bg:index==isactive}‘
            @click=‘fn(index)‘>
            {{item}}
       </div>
    </div>
  </template>
   
  <script>
    export default {
      data() {
        return {
             isactive:0,
             arr:[‘111‘,‘222‘,‘333‘,‘444‘]
        }
      },
      methods: {
        fn:function(index){
            console.log(index);
            this.isactive=index;
        }
      },
    }
  </script>
   
  <style scoped>
    /*点击文字变颜色*/
    .bg{
        color:pink;
    }
  </style>
   

  

vue循环数据点击变换颜色

原文:https://www.cnblogs.com/fei3/p/12000923.html

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