JS 和 Vue 实现点击按钮添加数据并渲染

使用 JS 实现点击按钮添加一条数据，并渲染在页面上可以按照以下步骤进行操作：

在 HTML 中创建一个按钮和一个用于显示数据的容器，如下所示：

<button id='addBtn'>添加数据</button>
<ul id='dataList'></ul>

在 JavaScript 中获取按钮和数据容器的引用，并添加点击事件监听器：

const addButton = document.getElementById('addBtn');
const dataList = document.getElementById('dataList');

addButton.addEventListener('click', addData);

定义一个函数 addData，该函数将在按钮点击时执行，用于添加一条数据并将其添加到数据容器中：

function addData() {
  // 创建一个新的数据项
  const newData = document.createElement('li');
  newData.textContent = '新的数据';

  // 将新的数据项添加到数据容器中
  dataList.appendChild(newData);
}

这样，当点击按钮时，就会在数据容器中添加一条新的数据。

使用 Vue 实现相同的功能可以按照以下步骤进行操作：

在 HTML 中引入 Vue 库，并创建一个 Vue 实例，定义数据和方法：

<div id='app'>
  <button @click='addData'>添加数据</button>
  <ul>
    <li v-for='item in data'>{{ item }}</li>
  </ul>
</div>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
  new Vue({
    el: '#app',
    data: {
      data: []
    },
    methods: {
      addData() {
        // 添加一条新的数据
        this.data.push('新的数据');
      }
    }
  });
</script>

在 Vue 中，我们使用 v-for 指令来循环渲染数据，使用 @click 指令来监听按钮点击事件，并将数据存储在 Vue 实例的 data 中。

这样，当点击按钮时，Vue 会自动更新数据，并重新渲染页面，显示新添加的数据。