代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 800px;
}
table th,
td {
border: 1px solid black;
text-align: center;
}
.insertDiv {
position: fixed;
margin-left: -400px;
margin-top: -300px;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
background-color: white;
box-shadow: 0 0 30px;
}
.insertDivWrap-top {
height: 50px;
background-color: gray;
border-bottom: 1px solid black;
}
.insertDivWrap-top .Title {
display: inline-block;
margin-left: 15px;
margin-top: 15px;
}
.insertDivWrap-top .close {
width: 50px;
margin-top: 15px;
color: black;
text-align: center;
text-decoration: none;
float: right;
cursor: pointer;
}
.insertDivWrap-Content {
padding: 16px;
}
.insertDivWrap-Content span {
display: inline-block;
width: 80px;
margin: 4px;
}
</style>
</head>
<body>
<div id="app">
标题：<input type="text" v-model="selectTxt">
<br>
<button @click="closeInsertBtn = true">添加</button>
<table>
<tr>
<th>Id</th>
<th>标题</th>
<th>分类</th>
<th>创建时间</th>
<th>浏览量</th>
<th>点赞数</th>
<th>是否置顶</th>
<th>操作</th>
</tr>
<tr v-for="item in fillTitle">
<td>{{item.Id}}</td>
<td>{{item.Title}}</td>
<td>{{item.ClassFication}}</td>
<td>{{item.TimeCreate}}</td>
<td>{{item.LookCount}}</td>
<td>{{item.LikeCount}}</td>
<td>{{item.IsTop?'是':'否'}}</td>
<td>
<button @click="Edit(item)">编辑</button>
<button @click="Delete(item.Id)">删除</button>
</td>
</tr>
<!-- 查无记录 -->
<tr v-if="fillTitle.length == 0">
<td colspan="8">查无记录</td>
</tr>
</table>
<!-- 添加博客弹窗 -->
<div class="insertDiv" v-if="closeInsertBtn">
<div class="insertDivWrap-top">
<div class="Title">添加博客</div>
<a class="close" @click="closeInsertBtn = false">X</a>
</div>
<div class="insertDivWrap-Content">
<span>编号：</span>
<input type="text" v-model="newId"><br>
<span>标题：</span>
<input type="text" v-model="newTitle"><br>
<span>分类：</span>
<select v-model="newFication">
<option>HTML5</option>
<option>CSS3</option>
<option>ES6</option>
<option>JAVA</option>
<option>.NET</option>
</select><br>
<span>创建时间：</span>
<input type="text" v-model="newTimeCreate"><br>
<span>浏览量：</span>
<input type="text" v-model="newLookCount"><br>
<span>点赞数：</span>
<input type="text" v-model="newLikeCount"><br>
<span>是否置顶：</span>
<input type="radio" name="isTop" id="rd1" :value="true" v-model="newIsTop">
<label for="rd1">是</label>
<input type="radio" name="isTop" id="rd2" :value="false" v-model="newIsTop">
<label for="rd2">否</label>
<br>
<br>
<button @click="Save">保存</button>
</div>
</div>
<!-- 编辑博客弹窗 -->
<div class="insertDiv" v-if="editCloseBtn">
<div class="insertDivWrap-top">
<div class="Title">编辑博客</div>
<a class="close" @click="editCloseBtn = false">X</a>
</div>
<div class="insertDivWrap-Content">
<span>编号：</span>
<!-- disabled 不允许修改 -->
<input type="text" v-model="oldId" disabled><br>
<span>标题：</span>
<input type="text" v-model="oldTitle"><br>
<span>分类：</span>
<select v-model="oldFication">
<option>HTML5</option>
<option>CSS3</option>
<option>ES6</option>
<option>JAVA</option>
<option>.NET</option>
</select><br>
<span>创建时间：</span>
<input type="text" v-model="oldTimeCreate"><br>
<span>浏览量：</span>
<input type="text" v-model="oldLookCount"><br>
<span>点赞数：</span>
<input type="text" v-model="oldLikeCount"><br>
<span>是否置顶：</span>
<input type="radio" name="isTop" id="rd1" :value="true" v-model="oldIsTop">
<label for="rd1">是</label>
<input type="radio" name="isTop" id="rd2" :value="false" v-model="oldIsTop">
<label for="rd2">否</label>
<br>
<br>
<button @click="Preserve">保存</button>
</div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
let app = Vue.createApp({
data() {
return {
// 控制编辑窗口的弹窗
editCloseBtn: false,
// 得到旧的值
oldId: '',
oldTitle: '',
oldFication: '',
oldTimeCreate: '',
oldLookCount: '',
oldLikeCount: '',
oldIsTop: '',
// 添加的新值
newId: '',
newTitle: '',
newFication: '',
newTimeCreate: '',
newLookCount: '',
newLikeCount: '',
newIsTop: '',
// 打开关闭添加窗口(控制添加窗口的弹窗)
closeInsertBtn: false,
// 搜索框里面的内容
selectTxt: '',
lists: [
{
Id: 1,
Title: '标题1',
// 分类
ClassFication: 'HTML5',
// 创建时间
TimeCreate: '2023-4-6 17:27:00',
// 浏览量
LookCount: 122,
// 点赞数
LikeCount: 1,
// 是否置顶
IsTop: true
},
{
Id: 2,
Title: '标题2',
// 分类
ClassFication: 'HTML5',
// 创建时间
TimeCreate: '2023-4-6 17:27:00',
// 浏览量
LookCount: 50,
// 点赞数
LikeCount: 5,
// 是否置顶
IsTop: true
},
{
Id: 3,
Title: '标题3',
// 分类
ClassFication: 'CSS3',
// 创建时间
TimeCreate: '2023-4-6 17:27:00',
// 浏览量
LookCount: 1000,
// 点赞数
LikeCount: 12,
// 是否置顶
IsTop: true
},
{
Id: 4,
Title: '标题4',
// 分类
ClassFication: 'HTML5',
// 创建时间
TimeCreate: '2023-4-6 17:27:00',
// 浏览量
LookCount: 200,
// 点赞数
LikeCount: 5,
// 是否置顶
IsTop: false
},
{
Id: 5,
Title: '标题5',
// 分类
ClassFication: 'HTML5',
// 创建时间
TimeCreate: '2023-4-6 17:27:00',
// 浏览量
LookCount: 200,
// 点赞数
LikeCount: 1,
// 是否置顶
IsTop: true
}
]
}
},
// 计算属性
computed: {
fillTitle() {
let tmp = [];
for (let i = 0; i < this.lists.length; i++) {
// 用一个变量，接受符合条件的查询结果
let blog = this.lists[i];
if (blog.Title.includes(this.selectTxt)) {
tmp.push(blog);
}
}
return tmp;
},
},
// 方法
methods: {
// 添加
Save() {
console.log(this.newId);
console.log(this.newTitle);
console.log(this.newFication);
console.log(this.newTimeCreate);
console.log(this.newLookCount);
console.log(this.newLikeCount);
console.log(this.newIsTop);
this.lists.push({
Id: this.newId,
// 标题
Title: this.newTitle,
// 分类
ClassFication: this.newFication,
// 创建时间
TimeCreate: this.newTimeCreate,
// 浏览量
LookCount: this.newLookCount,
// 点赞数
LikeCount: this.newLikeCount,
// 是否置顶
IsTop: this.newIsTop
})
// 关闭弹窗
this.closeInsertBtn = false;
// 清空数据
this.newId = '';
this.newTitle = '';
this.newFication = '';
this.newTimeCreate = '';
this.newLookCount = '';
this.newLikeCount = '';
this.newIsTop = '';
},
// 删除
Delete(id) {
for (let i = 0; i < this.lists.length; i++) {
if (this.lists[i].Id == id) {
this.lists.splice(i, 1);
return;
}
}
},
// 编辑
Edit(blog) {
// 显示弹窗
this.editCloseBtn = true;
this.oldId = blog.Id;
this.oldTitle = blog.Title;
this.oldFication = blog.ClassFication;
this.oldTimeCreate = blog.TimeCreate;
this.oldLookCount = blog.LookCount;
this.oldLikeCount = blog.LikeCount;
this.oldIsTop = blog.IsTop;
},
// 保存编辑后的数据
Preserve() {
// 找出编辑的博客记录，完成添加
for (let i = 0; i < this.lists.length; i++) {
let tmpBlog = this.lists[i];
// 通过id来找到需要更改的博客
if (tmpBlog.Id == this.oldId) {
tmpBlog.Id = this.oldId;
tmpBlog.Title = this.oldTitle;
tmpBlog.ClassFication = this.oldFication;
tmpBlog.TimeCreate = this.oldTimeCreate;
tmpBlog.LookCount = this.oldLookCount;
tmpBlog.LikeCount = this.oldLikeCount;
tmpBlog.IsTop = this.oldIsTop;
// 关闭弹窗
this.editCloseBtn = false;
return;
}
}
},
}
}).mount('#app')
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手