前端vue实现数据显示

Vue 数据显示基础方法

在Vue中显示数据主要通过数据绑定实现，核心是利用Vue的响应式系统和模板语法。以下是几种常用方式：

数据绑定

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

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

v-text指令

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

列表数据渲染

对于数组数据的展示，Vue提供了v-for指令：

基础列表渲染

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

带索引的列表

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

条件渲染

根据数据状态控制显示逻辑：

v-if指令

<div v-if="isVisible">可见内容</div>
<div v-else>替代内容</div>

v-show指令

<div v-show="shouldShow">显示/隐藏内容</div>

计算属性显示

对于需要计算的数据：

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

<div v-for="item in filteredItems">{{ item.name }}</div>

样式和类绑定

动态控制显示样式：

类绑定

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

样式绑定

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

表单数据绑定

双向数据绑定实现：

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

异步数据加载

结合axios等HTTP库：

data() {
  return {
    posts: []
  }
},
async created() {
  const response = await axios.get('/api/posts')
  this.posts = response.data
}

<div v-for="post in posts" :key="post.id">
  <h3>{{ post.title }}</h3>
  <p>{{ post.body }}</p>
</div>

组件间数据传递

父组件向子组件传递数据：

<!-- 父组件 -->
<child-component :message="parentMessage"></child-component>

<!-- 子组件 -->
<script>
export default {
  props: ['message']
}
</script>

状态管理(Vuex)

对于全局状态：

// 获取state数据
this.$store.state.count

// 组件中映射
computed: {
  ...mapState(['count'])
}

<div>{{ count }}</div>

数据格式化

使用过滤器或方法格式化显示：

filters: {
  currency(value) {
    return '$' + value.toFixed(2)
  }
}

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

以上方法覆盖了Vue中数据显示的主要场景，开发者可以根据具体需求选择合适的方式。响应式系统会自动处理数据变化时的视图更新，确保UI与数据保持同步。