网页显示不出表格
问题描述:
打开后网页后没有表格。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”,但未在实例上定义。”。将代码修改为如下后再测试运行试下:
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星