VueJS中如何基于模板添加元素并更新现有计数器？

我尝试用Vue更新静态HTML，要实现修改元素内容、图标，还要往DOM里加新元素。因为元素结构可能复杂，想用模板加新元素，不想用繁琐的JS动态创建。以下是我用来更新counter元素的代码：

<!DOCTYPE html>
<html>
<head>
  <title>Counter</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div class="list">
     <div class="counter" id="a">5</div>
  </div>
 <button>update</button>

  <script>
    new Vue({
      el: '#a',
      data: {
        counter: 5
      },
      mounted() {
        this.counter = 10;
      },
      template: '<div>{{ counter }}</div>'
    });
  </script>
</body>
</html>

需要解决两个问题：

1. 如何修改代码向list容器中添加新的counter元素？
2. 如何修改为通过按钮点击更新现有计数器，且不重写该元素？

解决方案 #

直接用Vue的数据驱动特性就能搞定这两个需求，修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Counter</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <div class="list">
       <!-- 保留原有计数器结构，绑定数据 -->
       <div class="counter">{{ counters[0] }}</div>
       <!-- 循环渲染新增的计数器 -->
       <div class="counter" v-for="(count, index) in counters.slice(1)" :key="index">{{ count }}</div>
    </div>
    <button @click="updateCounter">更新现有计数器</button>
    <button @click="addNewCounter">添加新计数器</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        // 用数组管理所有计数器的数据
        counters: [5]
      },
      methods: {
        // 更新第一个计数器，只改内容不重写元素
        updateCounter() {
          this.counters[0] += 1; // 这里可以改成你需要的任意值，比如直接设为10
        },
        // 添加新计数器元素
        addNewCounter() {
          this.counters.push(0); // 初始值自定义，比如设为5也可以
        }
      }
    });
  </script>
</body>
</html>

针对问题1的说明

• 把Vue挂载点从单个#a元素提升到包含整个操作区域的#app，这样能统一管理所有相关DOM
• 用数组counters存所有计数器的数据，要加新元素时，直接往数组里push新值就行
• 通过v-for指令自动循环渲染数组里的新增数据，自动生成对应的.counter元素，不用手动写JS创建DOM

针对问题2的说明

• 保留原有.counter元素的结构，只是把硬编码的5换成Vue数据绑定{{ counters[0] }}，这样更新数据时只会替换文本内容，不会重写整个元素
• 给按钮绑定@click事件，点击时调用updateCounter方法修改数组第一个元素的值，Vue会自动同步更新DOM内容，完全不会破坏原有元素的结构

内容的提问来源于stack exchange，提问作者mimic