console
new Vue ({
el: '#app',
data: {
Classes: {
highlight: false,
nohighlight: true
},
float: 'float',
blue: 'blue',
userClass: '',
isVisible: true,
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
jindutiaoColor: {
width: '0px',
backgroundColor: 'red'
}
},
computed: {
},
watch: {
},
methods: {
startEffect: function() {
var vm = this
setInterval(function() {
vm.Classes.highlight = !vm.Classes.highlight
vm.Classes.nohighlight = !vm.Classes.nohighlight
}, 1000)
},
kaishi: function() {
var vm = this
var width = 0
setInterval(function(){
width = width + 10
vm.jindutiaoColor.width = width + 'px'
}, 500)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button @click="startEffect">Start Effect</button>
<div id="effact" :class="Classes"></div>
<div :class="[float, blue, 'text-color']">class</div>
<div>
<input type="text" v-model="userClass"/>
<div :class="[{visible: true}, userClass]"></div>
</div>
<div>
<input type="text" v-model="userClass"/>
<input type="text" v-model="isVisible">
<div :class="[{visible: isVisible}, userClass]"></div>
</div>
<div>
<input type="text" v-model="myStyle.backgroundColor"/>
<div :style="myStyle"></div>
</div>
<div>
<button @click="kaishi">Strat begin</button>
<div :class="['jindutiao']" :style="jindutiaoColor">
</div>
</div>
</div>
#effact {
width: 100px;
height: 100px;
border: 1px solid black;
}
.highlight{
background-color: red;
width: 200px !important;
}
.nohighlight{
background-color: blue;
width: 100px !important;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow
}
.pink {
background-color: pink
}
.orange {
background-color: orange
}
.float {
float: right;
}
.text-color {
color: yellow;
}
.visible {
width: 50px;
height: 50px;
}
.jindutiao {
width: 200px;
height: 20px;
border: 1px solid black;
}