vue关于样式的绑定

　　也就通过这种方式

     <div id="app">
            <p @click="flag=1" v-bind:class="{active:flag==1}">html</p>
            <p @click="flag=2" v-bind:class="{active:flag==2}">css</p>
            <p @click="flag=3" v-bind:class="{active:flag==3}">java</p>
            <p @click="flag=4" v-bind:class="{active:flag==4}">jq</p>
            <div id="sp" >
                    <span v-if="flag==1">html</span>
                    <span v-else-if="flag==2">css</span>
                    <span v-else-if="flag==3">java</span>
                    <span v-else="flag==4">jq</span>
                </div>
        </div>

　　　　　　样式的绑定：：css｛css：布尔值｝这里的布尔值可以是判断，也可以是通过点击事件来就控制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
  <style>
            
            .active{
                  transform: scale(2);
                  transform: all 0.75s;
                  z-index: 20;/*层级*/
                  
            }

  </style>
</head>
<body>
            <div id="app">
                  <cpn></cpn>
            </div>
            <template id="cpn">
              <div >
                    <div v-for="(item,index) in img">
                       <img :src="item.p" width="150px" height="150px"  :class="{active:item.flag}" @click="imgScale(index)">
                  </div>
              </div>
            </template>
            <script>
                  new Vue({
                        el:'#app',
                        data:{

                        },
                        components: {
                            cpn:
                            {
                              template:'#cpn',
                                data () {
                                  return {
                                       img:[
                                          {p:'./2.jpg'},
                                          {p:'./2.jpg'},
                                          {p:'./2.jpg'},
                                    ]
                                  }
                              },
                              methods:{
                                    move(){
                                    //    this.msg=this.msg.split('').reverse().join('')
                                          
                                    },
                                    imgScale(index){
                                          console.log(111)
                                          var flag1=this.img[index].flag
                                           this.img.map((item)=>{
                                                item.flag=false
                                          })
                                          this.img[index].flag=!flag1
                                    }
                                },
                                  mounted () { //挂载
                                          var that =this
                                             this.img.map((item)=>{
                                       that.$set(item,'flag',false)
                                         })
                                }   
                               
                           
                            }
                        }
                  })

            </script>
</body>
</html>