CPICXIM/car_deal_util
CPICXIM/car_deal_util
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

保存进度！

Browse Source
This commit is contained in:
Kane Wang 2022-10-25 18:01:01 +08:00
parent e4fff250d2
commit b0f9f4e48d
1 changed files with 203 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
code/web/car_dealer/vue/todo-list.html
View File

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2022-10-21 16:36:51
* @LastEditors: Kane
* @LastEditTime: 2022-10-23 15:22:51
* @LastEditTime: 2022-10-25 14:21:00
* @FilePath: \car_dealer\vue\todo-list.html
* @Description:
*
@ -10,7 +10,6 @@
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -28,36 +27,55 @@
<div id="message_border">
<div class="message_box">
<span>{{errorMessage}}</span>
<button type="button" @click="closeMessageBox()">关闭</button>
<button type="button" @click="closeMessageBox()">
关闭
</button>
</div>
</div>
<div class="content">
<h1>{{title}}</h1>
<div class="border">
<div class="add_todo">
<input type="text" placeholder="请输入待办事项" />
<button type="button" @click="showMessageBox()">添加</button>
<input
type="text"
v-model="todo_text"
placeholder="请输入待办事项"
/>
<button type="button" @click="showMessageBox()">
添加
</button>
</div>
<hr>
<hr />
<div class="todo_list">
<div v-for="(item,index) in todo_list" :key="index">
<input type="checkbox" v-model="todo_list[index].selected" />
<input
type="checkbox"
v-model="todo_list[index].selected"
/>
<span v-show="!item.edit">{{item.todo_text}}</span>
<input type="text" v-show="item.edit" v-model="item.todo_text" />
<button type="button" v-on:click="editTodo(index,event)">
<input
type="text"
v-show="item.edit"
v-model="item.todo_text"
/>
<button
type="button"
v-on:click="editTodo(index,event)"
>
修改
</button>
<button type="button" @click="removeTodo(index)">删除</button>
<button type="button" @click="removeTodo(index)">
删除
</button>
</div>
</div>
<hr>
<hr />
<div class="tools">
<p class="summary">总计：{{todo_list.length}}</p>
</div>
</div>
</div>
</div>
</body>
<script>
const app = {
@ -65,105 +83,107 @@
return {
title: "待办任务",
errorMessage: "奇怪的错误！",
todo_list: [{
todo_text: "",
todo_list: [
{
selected: false,
todo_text: "回家",
edit: false
edit: false,
},
{
selected: true,
todo_text: "吃饭",
edit: false
edit: false,
},
{
selected: false,
todo_text: "洗澡",
edit: false
edit: false,
},
{
selected: false,
todo_text: "玩游戏",
edit: false
edit: false,
},
{
selected: false,
todo_text: "回家",
edit: false
edit: false,
},
{
selected: true,
todo_text: "吃饭",
edit: false
edit: false,
},
{
selected: false,
todo_text: "洗澡",
edit: false
edit: false,
},
{
selected: false,
todo_text: "玩游戏",
edit: false
edit: false,
},
{
selected: false,
todo_text: "回家",
edit: false
edit: false,
},
{
selected: true,
todo_text: "吃饭",
edit: false
edit: false,
},
{
selected: false,
todo_text: "洗澡",
edit: false
edit: false,
},
{
selected: false,
todo_text: "玩游戏",
edit: false
edit: false,
},
{
selected: false,
todo_text: "回家",
edit: false
edit: false,
},
{
selected: true,
todo_text: "吃饭",
edit: false
edit: false,
},
{
selected: false,
todo_text: "洗澡",
edit: false
edit: false,
},
{
selected: false,
todo_text: "玩游戏",
edit: false
edit: false,
},
{
selected: false,
todo_text: "回家",
edit: false
edit: false,
},
{
selected: true,
todo_text: "吃饭",
edit: false
edit: false,
},
{
selected: false,
todo_text: "洗澡",
edit: false
edit: false,
},
{
selected: false,
todo_text: "玩游戏",
edit: false
edit: false,
},
],
};
@ -188,17 +208,19 @@
const message = document.getElementById("message_border");
message.style["display"] = "none";
}
},
},
computed: {
buttonText(edit) {
return edit ? 修改 : 保存;
},
},
mounted() {
console.log("挂载完成！");
},
};
const vm = Vue.createApp(app);
vm.mount("#app");
</script>
</html>