vue实现数据展示

Vue 数据展示实现方法

插值表达式

使用双大括号 {{ }} 插入动态数据，适用于文本内容展示：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

v-text 指令

直接更新元素的 textContent，与插值表达式等效但会覆盖整个元素内容：

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

v-html 指令

渲染包含 HTML 标签的内容（注意 XSS 风险）：

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

v-for 列表渲染

遍历数组或对象生成重复元素：

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

计算属性

通过 computed 处理复杂数据逻辑：

<template>
  <div>{{ reversedMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

条件渲染

使用 v-if/v-else 或 v-show 控制元素显示：

<div v-if="isVisible">显示内容</div>
<div v-else>备选内容</div>
<div v-show="isActive">总是渲染但控制显示</div>

样式绑定

动态绑定 class 或 style：

<div :class="{ active: isActive }"></div>
<div :style="{ color: activeColor }"></div>

表单输入绑定

使用 v-model 实现双向数据绑定：

<input v-model="inputText">
<p>输入内容：{{ inputText }}</p>

过滤器（Vue 2）

格式化展示数据（Vue 3 已移除，可用方法或计算属性替代）：

<!-- Vue 2 -->
<div>{{ price | currency }}</div>

组件通信

通过 props 向子组件传递数据：

<child-component :data="parentData"></child-component>

异步数据展示

结合 v-if 和加载状态处理异步数据：

<div v-if="loading">加载中...</div>
<div v-else-if="error">加载失败</div>
<div v-else>{{ apiData }}</div>