网页显示不出表格

网页显示不出表格

问题描述:

打开后网页后没有表格。vue有没有和java类似的debug方法,可以一步一步的运行代码?

相关截图:

https://img1.sycdn.imooc.com//climg/61ab684509534c2406790436.jpg

相关代码:

<!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");


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,没有呢。报错信息Property "user" was accessed during render but is not defined on instance. 显示“在渲染期间访问了属性“user”,但未在实例上定义。”。将代码修改为如下后再测试运行试下:
https://img1.sycdn.imooc.com//climg/61ac518109da048903330334.jpg

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师