vue实现动态表达

Vue 实现动态表达的方法

Vue.js 提供了多种方式实现动态表达，以下是一些常见的方法：

插值表达式

使用双大括号 {{ }} 进行文本插值是最简单的动态表达方式。数据变化时视图会自动更新。

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

v-bind 指令

动态绑定 HTML 属性，可以使用简写 :。

<img :src="imageSrc" :alt="imageAlt">

v-model 指令

实现表单输入和应用状态之间的双向绑定。

<input v-model="username">

计算属性

对于需要复杂逻辑的动态表达式，使用计算属性可以缓存结果提高性能。

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

方法调用

在插值表达式中可以直接调用方法实现动态表达。

<div>{{ formatDate(date) }}</div>

动态样式绑定

通过对象语法或数组语法动态绑定 class 和 style。

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

条件渲染

使用 v-if、v-else-if、v-else 根据条件动态渲染内容。

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

列表渲染

使用 v-for 指令基于数组或对象动态渲染列表。

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

动态组件

通过 is 特性或 <component> 标签动态切换组件。

<component :is="currentComponent"></component>

插槽

使用插槽实现内容分发，实现更灵活的组件动态表达。

<slot name="header"></slot>

自定义指令

创建自定义指令实现特定 DOM 操作的动态行为。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

过滤器

使用过滤器格式化文本显示（Vue 3 中已移除，可用方法替代）。

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

这些方法可以单独使用或组合使用，根据具体场景选择最合适的动态表达实现方式。