<template>
<div id="app">
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>
</div>
</template>
<script>
export default {
data: {
count: 0
},
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
display: flex; /* 弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center;
min-height: 100vh;
}
button {
color: #4fc08d;
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.5em 2em;
outline: none;
margin: 0 auto;
}
button:hover {
cursor: pointer;
outline: none;
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.