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>
