能否用Vue.js实现jQuery式动态DOM操作及无预定义模板的AJAX更新？

阿华AIGC实验室

2026-5-19

Vue.js 实现动态内容更新：替代 jQuery DOM 操作的方案

当然可以用 Vue.js 实现你描述的这类 AJAX 数据更新操作，而且Vue的思路会比jQuery的手动DOM操作更优雅、更易维护！

核心思路：数据驱动而非直接操作DOM

和jQuery那种手动选中DOM元素、修改内容的命令式操作不同，Vue的核心是数据驱动视图——你只需要把AJAX返回的JSON数据绑定到Vue实例的响应式数据上，页面就会自动根据数据变化更新，完全不用手动去操作DOM元素（比如找ID、修改innerHTML这类操作）。

举个简单的示例：

<!-- Vue模板 -->
<div id="app">
  <h3>{{ title }}</h3>
  <p>{{ description }}</p>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

// Vue实例
const app = new Vue({
  el: '#app',
  data() {
    return {
      title: '',
      description: '',
      list: []
    }
  },
  mounted() {
    // 模拟AJAX请求（实际项目可以用axios、fetch等）
    setTimeout(() => {
      // 假设这是AJAX返回的JSON数据
      const responseData = {
        title: '动态更新的标题',
        description: '这是通过AJAX获取的描述内容',
        list: [
          { id: 1, name: '列表项1' },
          { id: 2, name: '列表项2' }
        ]
      };
      // 直接赋值给响应式数据，页面自动更新
      this.title = responseData.title;
      this.description = responseData.description;
      this.list = responseData.list;
    }, 1000);
  }
});

不用预定义所有更新的ID类型

你完全不需要提前为所有可能的更新ID都写好模板。Vue提供了多种灵活的方式处理动态内容：

动态绑定属性：如果需要根据数据动态设置DOM的ID，可以用v-bind:id（简写:id），比如<div :id="dynamicId">{{ content }}</div>，其中dynamicId是你从JSON里拿到的ID值。

条件渲染：如果返回的JSON数据有不同类型的内容，可以用v-if/v-else根据数据类型渲染不同的模板块，比如：

<div v-if="data.type === 'text'">{{ data.content }}</div>
<img v-else-if="data.type === 'image'" :src="data.content" alt="">
<ul v-else>
  <li v-for="item in data.content" :key="item.id">{{ item.text }}</li>
</ul>