vue实现信息查看

Vue 实现信息查看功能

数据绑定与显示

通过 Vue 的模板语法和指令实现数据的动态绑定和显示。使用 v-for 循环遍历数据列表，v-if 或 v-show 控制显示条件。

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

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

动态加载数据

通过 API 请求动态加载数据，使用 axios 或 fetch 获取后端数据并更新到 Vue 的 data 中。

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this.fetchItems()
  },
  methods: {
    fetchItems() {
      axios.get('/api/items')
        .then(response => {
          this.items = response.data
        })
        .catch(error => {
          console.error('Error fetching items:', error)
        })
    }
  }
}
</script>

详细信息查看

通过点击事件触发模态框或页面跳转，展示详细信息。使用 Vue Router 实现页面跳转，或通过状态管理（如 Vuex）共享数据。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id" @click="viewDetail(item.id)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    viewDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>

模态框展示

使用第三方库（如 Element UI）或自定义模态框组件实现详细信息展示。

<template>
  <div>
    <button @click="showModal = true">View Details</button>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span @click="showModal = false">&times;</span>
        <p>{{ selectedItem.details }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      selectedItem: { details: 'Detailed information here' }
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
</style>

分页与搜索

结合分页组件和搜索功能，实现大数据集的高效查看。使用 computed 属性过滤数据。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="currentPage--" :disabled="currentPage === 1">Previous</button>
    <button @click="currentPage++" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      searchQuery: '',
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      ).slice((this.currentPage - 1) * this.itemsPerPage, this.currentPage * this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage)
    }
  }
}
</script>