This repository has been archived on 2024-03-13. You can view files and clone it, but cannot push or open issues or pull requests.
timekeeper/components/JohnHacks.vue

51 lines
881 B
Vue
Raw Normal View History

2022-01-04 22:41:36 +00:00
<template>
<div class="hello">
<h1>{{ msg }}</h1>
2022-01-05 19:19:51 +00:00
<button @click="button_clicky()">Click Me</button>
<div>clicks = {{ clicks }}</div>
2022-01-04 22:41:36 +00:00
<ul>
2022-01-05 19:19:51 +00:00
<li v-for="value in testvalues.slice(0, clicks)" :key="value">
{{ value }}
</li>
2022-01-04 22:41:36 +00:00
</ul>
</div>
</template>
<script>
export default {
name: 'JohnHacks',
2022-01-05 19:19:51 +00:00
data() {
2022-01-04 22:41:36 +00:00
return {
msg: 'John copies files and makes a mess',
testvalues: [1, 1, 2, 3, 5, 8, 13, 21],
clicks: 0,
}
},
methods: {
2022-01-05 19:19:51 +00:00
button_clicky() {
// eslint-disable-next-line no-console
console.log('!')
this.clicks += 1
},
},
2022-01-04 22:41:36 +00:00
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>-->