Find the JSFiddle here: https://jsfiddle.net/smax/jhj8cqdm/
Or use this Code:
HTML:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="exercise">
<!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
<div>
<button @click="startEffect">Start Effect</button>
<div id="effect" v-bind:class="effectClasses"></div>
</div>
<!-- 2) Create a couple of CSS classes and attach them via the array syntax -->
<div v-bind:class="[float, 'blue', 'text-color']">I got no class :(</div>
<!-- 3) Let the user enter a class (create some example classes) and attach it -->
<div>
<input type="text" v-model="userClass">
<div v-bind:class="[{visible: true}, userClass]"></div>
</div>
<!-- 4) Let the user enter a class and enter true/ false for another class (create some example classes) and attach the classes -->
<div>
<input type="text" v-model="userClass">
<input type="text" v-model="isVisible">
<div v-bind:class="[{visible: isVisible}, userClass]"></div>
</div>
<!-- 5) Repeat 3) but now with values for styles (instead of class names). Attach the respective styles. -->
<div>
<input type="text" v-model="myStyle.backgroundColor">
<div v-bind:style="myStyle"></div>
</div>
<!-- 6) Create a simple progress bar with setInterval and style bindings. Start it by hitting the below button. -->
<div>
<button v-on:click="startProgress">Start Progress</button>
<div v-bind:class="['progress-bar']" v-bind:style="progressBar"></div>
</div>
</div>
CSS:
#effect {
width: 100px;
height: 100px;
border: 1px solid black;
}
.highlight {
background-color: red;
width: 200px !important;
}
.shrink {
background-color: gray;
width: 50px !important;
}
.blue {
background-color: blue;
}
.float {
float: right;
}
.text-color {
color: yellow;
}
.visible {
width: 100px;
height: 50px;
}
.progress-bar {
width: 200px;
height: 20px;
border: 1px solid black;
}
JavaScript:
new Vue({
el: '#exercise',
data: {
effectClasses: {
highlight: false,
shrink: true
},
float: 'float',
userClass: '',
isVisible: true,
myStyle: {
width: '100px',
height: '150px',
backgroundColor: 'gray'
},
progressBar: {
width: '0px',
backgroundColor: 'red'
}
},
methods: {
startEffect: function() {
var vm = this;
setInterval(function() {
vm.effectClasses.highlight = !vm.effectClasses.highlight;
vm.effectClasses.shrink = !vm.effectClasses.shrink;
}, 1000);
},
startProgress: function() {
var vm = this;
var width = 0;
setInterval(function() {
width = width + 10;
vm.progressBar.width = width + 'px';
}, 500);
}
}
});