网页显示不出表格
问题描述：
打开后网页后没有表格。vue有没有和java类似的debug方法,可以一步一步的运行代码？
相关截图：
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="container">
<!-- 头部区域 -->
<div class="header">
<span class="fl">后台管理系统</span>
<ul class="fr">
<li><a href="javascript:;"><i class="iconfont icon-yonghu1"></i>个人中心</a></li>
<li><a href="javascript:;"><i class="iconfont icon-tuichu"></i>退出</a></li>
</ul>
</div>
<!-- 侧边栏 -->
<div class="aside">
<div>
<img class="avatar" src="./images/avatar.jpg">
<h3 class="name">云淡风轻</h3>
</div>
<ul class="nav">
<li>
<a href="#">
<i class="iconfont icon-tongji2x"></i>数据统计
</a>
</li>
<li>
<a href="#">
<i class="iconfont icon-ai-article"></i>文章管理
</a>
</li>
<li>
<a href="#">
<i class="iconfont icon-lanmuguanli"></i>栏目管理
</a>
</li>
<li>
<a href="#">
<i class="iconfont icon-pinglun"></i>评论管理
</a>
</li>
<li class="active">
<a href="#">
<i class="iconfont icon-yonghu"></i>用户管理
</a>
</li>
<li>
<a href="#">
<i class="iconfont icon-shezhi"></i>系统设置
</a>
</li>
</ul>
</div>
<!-- 内容区 -->
<div class="main">
<div class="title">
<h1>用户管理</h1>
</div>
<div class="form fl">
<form>
<h3>{{user.type==1?'添加新用户':'编辑用户信息'}}</h3>
<div class="form-group">
<label>姓名</label>
<input class="form-control" type="text" v-model="user.name">
</div>
<div class="form-group">
<label>昵称</label>
<input class="form-control" type="text" v-model="user.nickname">
</div>
<div class="form-group">
<label>性别</label>
<input class="form-control" type="text" v-model="user.gender">
</div>
<div class="form-group">
<button class="btn-primary" type="button" @click="handle">确定</button>
</div>
</form>
</div>
<div class="table fl">
<table width="600">
<caption><h3>用户列表</h3></caption>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>id</th>
<th>姓名</th>
<th>昵称</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td class="td-center"><input type="checkbox"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.nickname}}</td>
<td>{{item.gender}}</td>
<td>
<a @click="edit(item.id)" href="javascript:;" class="btn btn-edit" style="margin-right: 8px;">编辑</a>
<a @click="del(item.id)" href="javascript:;" class="btn btn-delete">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="./js/users.js"></script>
</body>
</html>const { reactive } = Vue;
const list = reactive([
{ id: 1, name: "Lux", nickname: "光辉女郎", gender: "女" },
{ id: 2, name: "Jax", nickname: "武器大师", gender: "男" },
{ id: 3, name: "Ashe", nickname: "寒冰射手", gender: "女" },
{ id: 4, name: "VN", nickname: "暗夜猎手", gender: "女" },
{ id: 5, name: "Raze", nickname: "符文法师", gender: "男" },
]);
const user = reactive({
id: "",
name: "",
nickname: "",
gender: "",
type: 1,
});
function del(id) {
if (confirm("您确定要删除吗？")) {
//findIndex返回满足条件的单元索引
let index = list.findIndex((item) => item.id == id);
//参数1:要删除的单元索引
//参数2:删除接下来的几个单元
list.splice(index, 1);
}
}
function add() {
//表单验证
if (user.name.trim().length == 0) {
alert("姓名必填");
return;
}
if (user.nickname.trim().length == 0) {
alert("昵称必填");
return;
}
if (use.gender != "男" && user.gender != "女") {
alert("性别必须为男或女");
return;
}
list.push({
id: list[list.length - 1].id + 1,
name: user.name,
nickname: user.nickname,
gender: user.gender,
});
//清空表单
(user.name = ""), (user.nickname = ""), (user.gender = "");
}
//点击编辑按钮时，将当前行数据显示到表单中
//核心：根据id获取当前行的数据，再赋值给user
function edit(id) {
//返回满足条件的单元值
let tmp = list.find((item) => item.id == id);
(user.id = tmp.id),
(user.name = tmp.name),
(user.nickname = tmp.nickname),
(user.nickname = tmp.nickname),
(user.gender = tmp.gender);
user.type = 2;
}
function modify() {
//表单验证
if (user.name.trim().length == 0) {
alert("姓名必填");
return;
}
if (user.nickname.trim().length == 0) {
alert("昵称必填");
return;
}
if (use.gender != "男" && user.gender != "女") {
alert("性别必须为男或女");
return;
}
let tmp = list.find((item) => item.id == user.id);
(user.id = tmp.id),
(user.name = tmp.name),
(user.nickname = tmp.nickname),
(user.nickname = tmp.nickname),
(user.gender = tmp.gender);
//清空表单
(user.name = ""), (user.nickname = ""), (user.gender = "");
user.type = 1;
}
function handle() {
if (user.type == 1) {
add();
} else {
modify();
}
}
const app = {
setup() {
return;
{
list, del, add, edit,handle;
}
},
};
Vue.createApp(app).mount(".main");11
收起
正在回答
1回答
同学你好，没有呢。报错信息Property "user" was accessed during render but is not defined on instance. 显示“在渲染期间访问了属性“user”，但未在实例上定义。”。将代码修改为如下后再测试运行试下：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
2023版Java工程师
- 参与学习 人
- 提交作业 8791 份
- 解答问题 9886 个
综合就业常年第一，编程排行常年霸榜，北上广深月薪过万！ 不需要基础，无需脱产即可学习，只要你有梦想，想高薪！ 全新升级：技术栈升级（包含VUE3.0，ES6，Git）+项目升级（前后端联调与功能升级）
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星