vue实现数据渲染

Vue 数据渲染基础方法

插值表达式
使用双大括号语法直接渲染数据，适用于文本内容：

<p>{{ message }}</p>

v-text指令
以纯文本形式渲染数据，会覆盖元素原有内容：

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

v-html指令
渲染包含HTML标签的内容（注意XSS风险）：

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

条件渲染实现方式

v-if/v-else
通过条件判断控制DOM元素的显示与销毁：

<div v-if="isVisible">可见内容</div>
<div v-else>备选内容</div>

v-show
通过CSS的display属性控制显示/隐藏（适合频繁切换场景）：

<div v-show="hasData">数据加载中...</div>

列表渲染技术

v-for指令
遍历数组或对象生成动态内容，需配合key属性优化性能：

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

计算属性处理复杂数据
当需要处理渲染前的数据时：

computed: {
  filteredItems() {
    return this.items.filter(item => item.active)
  }
}

动态样式绑定

class绑定
根据数据状态切换CSS类名：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

style绑定
动态设置内联样式：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

表单输入绑定

v-model双向绑定
实现表单输入与数据的实时同步：

<input v-model="message" type="text">
<textarea v-model="message"></textarea>
<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

高级渲染技巧

使用过滤器
格式化显示内容（Vue 3需通过methods替代）：

<p>{{ price | currency }}</p>

作用域插槽
在子组件中向父组件传递渲染数据：

<child-comp>
  <template v-slot:default="slotProps">
    {{ slotProps.user.name }}
  </template>
</child-comp>

异步组件渲染
配合Suspense处理异步加载状态（Vue 3）：

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>