2017-10-20 12:31:29 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2018-11-24 18:49:19 +00:00
|
|
|
<h1 :class="className">
|
|
|
|
Hello {{ name }}!
|
|
|
|
</h1>
|
|
|
|
<button @click="changeColor()">
|
|
|
|
Change h1 Color
|
|
|
|
</button>
|
2017-10-20 12:31:29 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-07-12 12:03:50 +00:00
|
|
|
export default {
|
2019-07-10 10:45:49 +00:00
|
|
|
data () {
|
2018-07-12 12:03:50 +00:00
|
|
|
return { name: 'world', className: 'red' }
|
|
|
|
},
|
|
|
|
methods: {
|
2019-07-10 10:45:49 +00:00
|
|
|
changeColor () {
|
2018-07-12 12:03:50 +00:00
|
|
|
this.className = this.className === 'red' ? 'blue' : 'green'
|
2017-10-31 13:43:55 +00:00
|
|
|
}
|
2017-10-20 12:31:29 +00:00
|
|
|
}
|
2018-07-12 12:03:50 +00:00
|
|
|
}
|
2017-10-20 12:31:29 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
2018-07-12 12:03:50 +00:00
|
|
|
.red {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
.blue {
|
|
|
|
color: blue;
|
|
|
|
}
|
|
|
|
.green {
|
|
|
|
color: green;
|
|
|
|
}
|
2017-10-20 12:31:29 +00:00
|
|
|
</style>
|