vue实现数据前端显示

Vue 数据前端显示实现方法

数据绑定

Vue 的核心特性是数据绑定，通过 v-bind 或 {{ }} 语法实现数据与 DOM 的双向绑定。在模板中直接使用插值表达式显示数据：

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

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

列表渲染

使用 v-for 指令可以循环渲染数组或对象数据。为每个项添加唯一的 key 属性以提高性能：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

条件渲染

通过 v-if、v-else-if、v-else 或 v-show 控制元素的显示与隐藏。v-if 是惰性的，v-show 仅切换 CSS 的 display 属性：

<template>
  <div v-if="isVisible">显示内容</div>
  <div v-else>其他内容</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

计算属性

对于复杂逻辑或需要缓存的计算结果，使用 computed 属性。计算属性基于它们的响应式依赖进行缓存：

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

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

表单输入绑定

使用 v-model 实现表单输入与应用状态的双向绑定。适用于 <input>、<textarea> 和 <select> 元素：

<template>
  <input v-model="inputText" placeholder="输入内容">
  <p>输入的内容: {{ inputText }}</p>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    }
  }
}
</script>

异步数据加载

从 API 获取数据时，通常在 created 或 mounted 生命周期钩子中调用异步方法：

<template>
  <div v-if="loading">加载中...</div>
  <div v-else>
    <div v-for="post in posts" :key="post.id">{{ post.title }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
      loading: true
    }
  },
  async created() {
    try {
      const response = await fetch('https://api.example.com/posts')
      this.posts = await response.json()
    } finally {
      this.loading = false
    }
  }
}
</script>

状态管理

对于大型应用，使用 Vuex 或 Pinia 管理全局状态。通过 mapState 辅助函数或 useStore 钩子访问状态：

<template>
  <div>{{ count }}</div>
  <button @click="increment">增加</button>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

样式绑定

通过 v-bind:class 和 v-bind:style 动态绑定 CSS 类和内联样式：

<template>
  <div :class="{ active: isActive }">动态类</div>
  <div :style="{ color: activeColor }">动态样式</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      activeColor: 'red'
    }
  }
}
</script>