vue中$set的用法

最新推荐文章于 2024-03-19 09:15:35 发布

芈鹿

最新推荐文章于 2024-03-19 09:15:35 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： $set的用法

本文链接：https://blog.csdn.net/qq_43627981/article/details/97527280

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏


<template>
  <div>
    敌军还有
    <span class="mouse" @click="add">{{time.you}}</span>
    秒钟到达战场,受到敌方钟无艳攻击
    <span class="mouse" @click="reduce">{{time.me}}</span>

    次
    <div v-for="item in heros" :key="item.id">{{item.hero}}</div>
    <el-button type="success" @click="edit">修改英雄</el-button>
    <el-button type="success" @click="addHero">添加英雄</el-button>
  </div>
</template>

 <script>
export default {
  data() {
    return {
      time: {},
      heros: [
        { hero: "李白", id: "0" },
        { hero: "甄姬", id: "1" },
        { hero: "典韦", id: "2" },
        { hero: "李元芳", id: "3" },
        { hero: "吕布", id: "4" }
      ]
    };
  },
  created() {
    this.time = { you: 10 };
    // this.time.me = 0;无效的
    this.$set(this.time, "me", 10);
  },
  methods: {
    add() {
      this.time.you++;
    },

    reduce() {
      if (this.time.me-- === 0) this.time.me = 10;
    },
    edit() {
      this.$set(this.heros, 0, { hero: "鱼", id: "0" });//修改索引为0的英雄
    },
    addHero() {
      this.$set(this.heros, this.heros.length, {
        hero: "猴子",
        id: this.heros.length
      });
    }
  }
};
</script>