Nuxt/examples/with-tape/pages/index.vue

36 lines
479 B
Vue
Raw Normal View History

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