【每日一练】v-on指令的运用

最新推荐文章于 2024-10-08 20:57:52 发布

谢豪杰

最新推荐文章于 2024-10-08 20:57:52 发布

阅读量312

点赞数 3

分类专栏：每日一练文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_46580087/article/details/124043776

版权

每日一练专栏收录该内容

33 篇文章 16 订阅

订阅专栏

语法：

v-on:事件名="methods中的函数"

v-on:click

简写：

@click

实现加减

App.vue配置

<template>
  <div>
    <h1>我的粉丝数量：{{ count }}</h1>
    <button @click="addFn">加一个</button>
    <button @click="addCountFn(100)">加一百个</button>
    <button @click="subFn">减一个</button>
  </div>
</template>

<script>
export default {
  name: "Vuecli022Girlfriend",

  data() {
    return {
      count: 1,
    };
  },

  mounted() {},

  methods: {
    addFn() {
      this.count++;
    },
    addCountFn(num) {
      this.count += num;
    },
    subFn() {
      this.count--;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>