vue实现信息查看

Vue 实现信息查看功能

基础实现方式

使用 Vue 的模板语法和数据绑定展示信息。创建一个组件，通过 v-for 循环渲染列表数据，点击条目触发详情展示。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id" @click="showDetail(item)">
        {{ item.name }}
      </li>
    </ul>
    <div v-if="selectedItem">
      <h3>详细信息</h3>
      <p>ID: {{ selectedItem.id }}</p>
      <p>名称: {{ selectedItem.name }}</p>
      <p>描述: {{ selectedItem.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1', description: '描述内容1' },
        { id: 2, name: '项目2', description: '描述内容2' }
      ],
      selectedItem: null
    }
  },
  methods: {
    showDetail(item) {
      this.selectedItem = item
    }
  }
}
</script>

使用模态框展示详情

结合第三方 UI 库（如 Element UI）实现模态框效果，提升用户体验。

<template>
  <div>
    <el-table :data="items" @row-click="handleRowClick">
      <el-table-column prop="name" label="名称"></el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="详细信息">
      <p v-if="currentItem">ID: {{ currentItem.id }}</p>
      <p v-if="currentItem">名称: {{ currentItem.name }}</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ],
      dialogVisible: false,
      currentItem: null
    }
  },
  methods: {
    handleRowClick(row) {
      this.currentItem = row
      this.dialogVisible = true
    }
  }
}
</script>

动态加载远程数据

通过 API 请求获取数据，实现动态加载和查看功能。

<template>
  <div>
    <button @click="fetchData">加载数据</button>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <div v-for="item in apiData" :key="item.id" @click="selectItem(item)">
        {{ item.title }}
      </div>
      <div v-if="selectedApiItem">
        <h3>{{ selectedApiItem.title }}</h3>
        <p>{{ selectedApiItem.body }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      apiData: [],
      loading: false,
      selectedApiItem: null
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
        this.apiData = response.data
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    selectItem(item) {
      this.selectedApiItem = item
    }
  }
}
</script>

使用路由参数实现详情页

对于复杂应用，可通过 Vue Router 实现独立详情页面。

// router.js
const routes = [
  {
    path: '/items',
    component: ItemList
  },
  {
    path: '/items/:id',
    component: ItemDetail,
    props: true
  }
]

<!-- ItemList.vue -->
<template>
  <div>
    <router-link
      v-for="item in items"
      :key="item.id"
      :to="{ name: 'ItemDetail', params: { id: item.id } }"
    >
      {{ item.name }}
    </router-link>
  </div>
</template>

<!-- ItemDetail.vue -->
<template>
  <div v-if="item">
    <h2>{{ item.name }}</h2>
    <p>{{ item.description }}</p>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      item: null
    }
  },
  created() {
    this.fetchItem()
  },
  methods: {
    fetchItem() {
      // 根据 this.id 获取对应数据
    }
  }
}
</script>

状态管理集成

对于大型应用，使用 Vuex 集中管理状态，实现组件间数据共享。

// store.js
export default new Vuex.Store({
  state: {
    items: [],
    currentItem: null
  },
  mutations: {
    SET_ITEMS(state, items) {
      state.items = items
    },
    SET_CURRENT_ITEM(state, item) {
      state.currentItem = item
    }
  },
  actions: {
    async fetchItems({ commit }) {
      const res = await api.getItems()
      commit('SET_ITEMS', res.data)
    }
  }
})

<!-- 组件中使用 -->
<template>
  <div @click="viewDetail(item)">{{ item.name }}</div>
</template>

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

export default {
  computed: {
    ...mapState(['items'])
  },
  methods: {
    ...mapActions(['fetchItems']),
    viewDetail(item) {
      this.$store.commit('SET_CURRENT_ITEM', item)
      this.$router.push('/detail')
    }
  },
  created() {
    this.fetchItems()
  }
}
</script>