当前位置：首页 > VUE

vue实现新闻

2026-01-07 08:49:56VUE

Vue 实现新闻功能

使用 Vue 实现新闻功能通常涉及新闻列表展示、新闻详情页、分类筛选等模块。以下是实现的基本思路和代码示例。

新闻列表展示

通过 Vue 组件展示新闻列表，通常使用 v-for 指令循环渲染新闻数据。

<template>
  <div class="news-list">
    <div v-for="news in newsList" :key="news.id" class="news-item">
      <h3>{{ news.title }}</h3>
      <p>{{ news.summary }}</p>
      <span>{{ news.date }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: [
        { id: 1, title: '新闻标题1', summary: '新闻摘要1', date: '2023-01-01' },
        { id: 2, title: '新闻标题2', summary: '新闻摘要2', date: '2023-01-02' }
      ]
    }
  }
}
</script>

<style>
.news-list {
  padding: 20px;
}
.news-item {
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}
</style>

新闻详情页

通过动态路由实现新闻详情页，使用 $route.params 获取新闻 ID。

<template>
  <div class="news-detail">
    <h2>{{ news.title }}</h2>
    <div>{{ news.content }}</div>
    <p>{{ news.date }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: {}
    }
  },
  created() {
    const newsId = this.$route.params.id
    this.fetchNewsDetail(newsId)
  },
  methods: {
    fetchNewsDetail(id) {
      // 模拟 API 请求
      const mockData = {
        1: { title: '新闻标题1', content: '新闻内容1', date: '2023-01-01' },
        2: { title: '新闻标题2', content: '新闻内容2', date: '2023-01-02' }
      }
      this.news = mockData[id]
    }
  }
}
</script>

路由配置

在 Vue Router 中配置动态路由，实现新闻详情页的跳转。

import Vue from 'vue'
import VueRouter from 'vue-router'
import NewsList from './components/NewsList.vue'
import NewsDetail from './components/NewsDetail.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/news', component: NewsList },
  { path: '/news/:id', component: NewsDetail }
]

const router = new VueRouter({
  routes
})

export default router

新闻分类筛选

通过计算属性或方法实现新闻分类筛选功能。

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="all">全部</option>
      <option value="sports">体育</option>
      <option value="tech">科技</option>
    </select>
    <div v-for="news in filteredNews" :key="news.id">
      <h3>{{ news.title }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: 'all',
      newsList: [
        { id: 1, title: '体育新闻', category: 'sports' },
        { id: 2, title: '科技新闻', category: 'tech' }
      ]
    }
  },
  computed: {
    filteredNews() {
      if (this.selectedCategory === 'all') {
        return this.newsList
      }
      return this.newsList.filter(news => news.category === this.selectedCategory)
    }
  }
}
</script>

数据请求

使用 Axios 从后端 API 获取新闻数据。

import axios from 'axios'

export default {
  data() {
    return {
      newsList: []
    }
  },
  created() {
    this.fetchNews()
  },
  methods: {
    fetchNews() {
      axios.get('/api/news')
        .then(response => {
          this.newsList = response.data
        })
        .catch(error => {
          console.error('获取新闻失败:', error)
        })
    }
  }
}

分页功能

通过分页参数实现新闻列表的分页加载。

<template>
  <div>
    <div v-for="news in pagedNews" :key="news.id">
      <h3>{{ news.title }}</h3>
    </div>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: [],
      currentPage: 1,
      pageSize: 5
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.newsList.length / this.pageSize)
    },
    pagedNews() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.newsList.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>