也就通过这种方式
<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>