Vue-v-bind:class

v-bind:class

<style>

.shape { width:90px;height:50px;margin:10px;float:left;}

.square{background:blue;}

.circle{background:red;border-radius:50%;}

</style>

<div id="app">

<div class="shape square"></div>

<div class="shape circle"></div>

<div style="clear: both"></div>

<div class="shape" v-for="shape in shapes" v-bind:class="{circle:shape.circle,square:!shape.circle}"></div>

</div>

<script>

var vm = new Vue({

el: "#app",

data: { color:"blue",style: { backgroundColor:'red' }

,shapes:[{circle:true},{circle:false}]

}

,computed:{

}

}

);

</script

<div class="shape" v-for="shape in shapes" v-bind:class="[shape.shape]"></div>

shapes:[{shape:"square",circle:true},{shape:"circle",circle:false}]

v-bind:class="[shape.shape,shape.direction?shape.direction:'']"

<style>

.triangle{width:0;height:0;}

.up{

border-left:100px solid transparent;

border-right:100px solid transparent;

border-bottom:150px solid orange;

}

.down{

border-left:100px solid transparent;

border-right:100px solid transparent;

border-top:150px solid green;

}

</style>

<div class="shape" v-for="shape in shapes"

v-bind:class="[shape.shape,shape.direction?shape.direction:'']"></div>

<script>

var vm = new Vue({

el: "#app",

data: { color:"blue",style: { backgroundColor:'red' }

,shapes:[

{shape:"square",circle:true},

{shape:"circle",circle:false},

{shape:"triangle",direction:"up"},

{shape:"triangle",direction:"down"}

]

}

,computed:{

}

}

);

</script>

//Style

.animation{animation:strentch 1.0s ease-out}

@keyframes strentch{

0%{transform:scale(0.3);}

100%{transform:scale(1);}

}

//DOM

<div class="shape" v-for="shape in shapes"

v-bind:class="[shape.shape, shape.direction?shape.direction:'', {animation:shape.animation}]"></div>

//Vue

,shapes:[

{shape:"square",circle:true},

{shape:"circle",circle:false,animation:true},

{shape:"triangle",direction:"up"},

{shape:"triangle",direction:"down"}

]

* note
v-bind:class  to :class

<div class="shape" v-for="shape in shapes" :class="[shape.shape]"></div>

<div class="shape" v-for="shape in shapes"

:class="[shape.shape, shape.direction?shape.direction:'', {animation:shape.animation}]"></div>

v-on:click  to @click

end;