当前位置：首页 > news >正文

VUE2课程计划表练习

news 来源：原创 2025/5/10 7:54:44

在这里插入图片描述
主要练习数据变量对象
以下是修正后的完整代码：

//javascript
export default {data() {return {list: [{ id: '1', subject: 'Vue.js 前端实战开发', content: '学习指令，例如 v-if、v-for、v-model 等', place: '自习室', status: false }// 可以在这里添加更多项目...]}}
}

关键点
data() 现在返回一个包含 list 属性的对象
list 被正确定义为数组（使用方括号[]）
对象属性使用引号包裹（更规范的写法）
每个对象之间使用逗号分隔（如果有多个对象）

index.html代码

<!DOCTYPE html>
<html lang=""><head><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link href="css/bootstrap.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

APP.VUE组件代码

<template><div id=app><div class="card"><!-- 标题区域 --><div class="card-header">学习计划表</div><!-- 提交区域 --><div class="card-body"><form @submit.prevent="add"><div class="row g-4"><!-- 学习科目 --><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习科目</span><input type="text"  class="form-control" placeholder="请输入学习科目"  v-model="subject"></div></div><!-- 学习任务 --><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习内容</span><textareaclass="form-control" placeholder="请输入学习内容" style="height: 32px;" v-model="content"></textarea></div></div><!-- 学习地点 --><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习地点</span><select class="form-select form-select-sm" v-model="selectedOption"><option v-for="option in options" :value="option.place" :key="option.placeCode">{{ option.place }}</option></select></div></div><!-- 添加按钮 --><div class="col-auto"><button type="submit" class="btn btn-primary">添加</button></div></div></form></div></div><table class="table table-striped table-hover table-bordered"><thead><tr><th scope="col">序号</th><th scope="col">学习科目</th><th scope="col">学习内容</th><th scope="col">学习地点</th><th scope="col">完成状态</th><th scope="col">操作</th></tr></thead><tbody><tr v-for="item in list" :key="item.id"><td>{{ item.id }}</td><td>{{ item.subject }}</td><td>{{ item.content }}</td><td>{{ item.place }}</td><td><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="'cb' + item.id"v-model="item.status" /><label class="form-check-label" for="'cb' + item.id" v-if="item.status">已完成</label><label class="form-check-label" for="'cb' + item.id" v-else>未完成</label></div></td><td><a href="javascript:;" @click="remove(item.id,item.status)">删除</a></td></tr></tbody></table>
</div></template><script>export default{data(){return {subject:'',content:'',nextId:'',selectedOption:'自习室',           options:[{placeCode: 0,place: '自习室',},                {placeCode: 1,place: '图书馆',},                {placeCode: 2,place: '宿舍',}],list:[{id: '1',	subject: 'Vue.js 前端实战开发222',	content: '学习指令，例如 v-if、v-for、v-model 等',place: '自习室',status: false}]}},methods:{add(){// alert(1111122222)if (this.subject === '') {alert('学习科目为必填项！')return}this.nextId = Math.max(this.list.map(item => item.id)) + 1let obj = {id: this.nextId,subject: this.subject,content: this.content,place: this.selectedOption,status: false,}this.list.push(obj)this.subject = ''this.content = ''this.selectedOption = '自习室'},remove(id,status){// alert(id)if (status) {this.list =  this.list.filter(item => item.id !== id)} else {alert('请完成该学习计划后再进行删除操作！')}}}}</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
</style>