有基于vue的新闻管理实例代码吗
时间: 2024-05-10 11:19:17 浏览: 13
是的,这是一个基于Vue的简单新闻管理系统,你可以参考一下:
```
<template>
<div>
<h1>新闻管理系统</h1>
<table>
<thead>
<tr>
<th>标题</th>
<th>作者</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in newsList" :key="index">
<td>{{ item.title }}</td>
<td>{{ item.author }}</td>
<td>{{ item.time }}</td>
<td>
<button @click="editNews(index)">编辑</button>
<button @click="deleteNews(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<div class="add-news">
<h2>添加新闻</h2>
<div>
<label>标题:</label>
<input type="text" v-model="title">
</div>
<div>
<label>作者:</label>
<input type="text" v-model="author">
</div>
<div>
<label>时间:</label>
<input type="text" v-model="time">
</div>
<button @click="addNews">添加</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
newsList: [
{ title: '新闻标题1', author: '作者1', time: '2021-06-01' },
{ title: '新闻标题2', author: '作者2', time: '2021-06-02' },
{ title: '新闻标题3', author: '作者3', time: '2021-06-03' },
],
title: '',
author: '',
time: '',
editIndex: -1,
}
},
methods: {
addNews() {
if (!this.title || !this.author || !this.time) {
alert('请填写完整信息')
return
}
if (this.editIndex === -1) {
this.newsList.push({
title: this.title,
author: this.author,
time: this.time,
})
} else {
this.newsList.splice(this.editIndex, 1, {
title: this.title,
author: this.author,
time: this.time,
})
}
this.title = ''
this.author = ''
this.time = ''
this.editIndex = -1
},
editNews(index) {
this.title = this.newsList[index].title
this.author = this.newsList[index].author
this.time = this.newsList[index].time
this.editIndex = index
},
deleteNews(index) {
this.newsList.splice(index, 1)
},
},
}
</script>
```
这个示例包含一个数据源 `newsList`,一个添加新闻的表单,以及编辑和删除新闻的操作。你可以根据自己的需求进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)