vue简单实例点击+1

点击按钮让数字+1

template结构

<template>
  <div class="shiyan">
    <div class="shiyan1">
      <p>{{count}}</p>
      <button @click="add">+1</button>
    </div>
  </div>
</template>

script结构

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    add() {
        this.count++
    }
  }
};
</script>

style结构

<style lang="scss">
@import "../index.scss";
.shiyan {
  width: 100%;
  height: 100%;
  .shiyan1 {
    width: 500px;
    height: 500px;
    margin: 35px auto;
    background-color: #eae8e8;
  }
}
</style>

点击按钮让数字+1效果图

 

转载于:https://www.cnblogs.com/Hajar/p/10911003.html