有基于vue的新闻管理系统的代码实例吗
时间: 2024-05-16 12:16:57 浏览: 13
当然有,以下是一个基于Vue的简单新闻管理系统的代码示例:
```
<template>
<div>
<h1>新闻管理系统</h1>
<div>
<button @click="showAddNewsModal = true">添加新闻</button>
<button @click="refreshNews">刷新</button>
</div>
<div v-if="loading">Loading...</div>
<div v-else>
<ul>
<li v-for="news in newsList" :key="news.id">
<h2>{{news.title}}</h2>
<p>{{news.content}}</p>
<button @click="deleteNews(news.id)">删除</button>
</li>
</ul>
</div>
<div v-if="showAddNewsModal">
<h3>添加新闻</h3>
<form @submit.prevent="addNews">
<div>
<label for="title">标题:</label>
<input type="text" id="title" v-model="newsTitle" required>
</div>
<div>
<label for="content">内容:</label>
<textarea id="content" v-model="newsContent" required></textarea>
</div>
<button type="submit">添加</button>
<button type="button" @click="showAddNewsModal = false">取消</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: true,
newsList: [],
showAddNewsModal: false,
newsTitle: '',
newsContent: '',
};
},
mounted() {
this.getNewsList();
},
methods: {
getNewsList() {
// 发送请求获取新闻列表
// 假设返回的是一个数组,每个元素包含id、title、content三个属性
this.newsList = [
{ id: 1, title: '新闻1', content: '内容1' },
{ id: 2, title: '新闻2', content: '内容2' },
{ id: 3, title: '新闻3', content: '内容3' },
];
this.loading = false;
},
refreshNews() {
this.loading = true;
this.getNewsList();
},
addNews() {
// 发送请求添加新闻
// 假设添加成功后返回一个对象,包含id、title、content三个属性
const newNews = {
id: Date.now(),
title: this.newsTitle,
content: this.newsContent,
};
this.newsList.push(newNews);
this.newsTitle = '';
this.newsContent = '';
this.showAddNewsModal = false;
},
deleteNews(id) {
// 发送请求删除新闻
// 假设删除成功
this.newsList = this.newsList.filter(news => news.id !== id);
},
},
};
</script>
```
该示例包含了获取、展示、添加和删除新闻的基本功能,你可以根据自己的需求进行修改和扩展。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)