当前位置：首页 > VUE

vue实现数据展示

2026-03-28 16:14:45VUE

Vue 数据展示基础方法

插值表达式
使用双大括号 {{ }} 绑定数据到模板，自动响应数据变化：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return { message: "Hello Vue" };
  }
};
</script>

v-text 指令
直接替换元素的 textContent，避免闪烁问题：

<span v-text="message"></span>

v-html 指令
渲染 HTML 内容（注意 XSS 风险）：

<div v-html="rawHtml"></div>

列表渲染

v-for 基础用法
遍历数组或对象生成动态内容：

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.name }}
  </li>
</ul>

v-for 与组件
列表项作为组件传递时需绑定 key：

<my-component
  v-for="item in items"
  :item="item"
  :key="item.id"
/>

条件渲染

v-if / v-else
根据条件销毁或重建 DOM 元素：

vue实现数据展示

<div v-if="isVisible">显示内容</div>
<div v-else>备用内容</div>

v-show
通过 CSS 切换显示状态（适合频繁切换）：

<div v-show="isActive">显示状态</div>

计算属性与侦听器

计算属性
处理复杂逻辑并缓存结果：

computed: {
  filteredList() {
    return this.items.filter(item => item.isActive);
  }
}

侦听器
响应特定数据变化执行异步操作：

watch: {
  searchQuery(newVal) {
    this.fetchResults(newVal);
  }
}

进阶数据绑定

表单双向绑定
使用 v-model 快速实现表单交互：

vue实现数据展示

<input v-model="username" type="text">
<textarea v-model="comment"></textarea>
<select v-model="selectedOption">
  <option v-for="opt in options" :value="opt.value">
    {{ opt.text }}
  </option>
</select>

自定义组件 v-model
实现组件双向绑定：

// 子组件
props: ['value'],
methods: {
  updateValue(val) {
    this.$emit('input', val);
  }
}

性能优化技巧

key 的重要性
列表渲染时为每项提供唯一标识符，避免不必要的 DOM 操作：

<div v-for="item in list" :key="item.id">{{ item.text }}</div>

避免 v-if 和 v-for 共用
优先使用计算属性过滤数据：

computed: {
  activeItems() {
    return this.items.filter(item => !item.isArchived);
  }
}

虚拟滚动
大数据量时使用库如 vue-virtual-scroller：

<virtual-scroller :items="largeList" item-height="50">
  <template v-slot="{ item }">
    <div>{{ item.content }}</div>
  </template>
</virtual-scroller>