点那亮那的vue代码 重点

< div  class= "box1" >

         < div  class= "box1-item avater" @ click= "change()" >

           < img  class= "Img"  src= "../../assets/img/small_icon/company.png" >

           < p  class= "wz" >公司简介 </ p >

         </ div >

         < div  class= "box1-item" @ click= "change()" >

           < img  class= "Img"  src= "../../assets/img/small_icon/executive.png" >

           < p  class= "wz" >高管简介 </ p >

         </ div >

         < div  class= "box1-item" @ click= "change()" >

           < img  class= "Img"  src= "../../assets/img/small_icon/bc.png" >

           < p  class= "wz" >工商管理 </ p >

         </ div >

         < div  class= "box1-item" @ click= "change()" >

           < img  class= "Img"  src= "../../assets/img/small_icon/website.png" >

           < p  class= "wz" >网站备案 </ p >

         </ div >

         < div  class= "box1-item" @ click= "change()" >

           < img  class= "Img"  src= "../../assets/img/small_icon/fee.png" >

           < p  class= "wz" >平台费用 </ p >

         </ div >

         < div  class= "box1-item" @ click= "change()" >

           < img  class= "Img"  src= "../../assets/img/small_icon/picture.png" >

           < p  class= "wz" >现场实拍 </ p >

         </ div >

         < div  class= "box1-item" @ click= "change()" >

           < img  class= "Img"  src= "../../assets/img/small_icon/phone.png" >

           < p  class= "wz" >联系方式 </ p >

         </ div >

       </ div >

  change() {

         var  self =  event. currentTarget; //找到点击事件的那个元素

         var  changelist =  document. querySelectorAll( '.box1 .box1-item'); //找到所有的点击清单

         for ( var  i =  0;  i <  changelist. length;  i++) {

           changelist[ i]. className =  'box1-item'  //遍历初始化每个清单属性

        }

         self. className +=  ' avater' //再原属性上加另外一个属性

      }