体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

关于页面空白显示的问题

来源：4-6 编辑用户--添加和修改切换

赵林0225

2021-10-13 14:54:28

老师您好！在上节课中，我也遇到了页面空白显示的问题如图：

https://img.mukewang.com/climg/616681cb090c21c419201040.jpg，我在使用老师给那位同学的解答后（老师提供的方法是先暂时删除差值表达式和相关代码）

https://img.mukewang.com/climg/6166820d0915f64008600490.jpg

但是在本节课中，我把相关的代码重新编辑添加后，页面又重新出现了第一张图的情况，下面是我的代码，请老师帮我看一下，我应该怎么解决，非常感谢！！

相关代码（index.html）：

<!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"0>
                    </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>

相关代码(users.js)：

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时，添加新用户；等于2时，就是编辑用户信息
    type:2
})

//点击编辑按钮时，将当前行数据显示到表单中
//核心：根据id获取当前行的数据，在赋值给user
function edit(id){
    //返回满足条件的单元值（findIndex是返回满足条件的索引）
  let tmp=list.find(function(item){
      return item.id==id;
  })
  user.id=tmp.id;
  user.name=tmp.name;
  user.nickname=tmp.nickname;
  user.gender=tmp.gender;
  user.type=2;

}
//点击确定按钮时，将修改数据更新会list数组
//核心：根据user.id找到list中的数据，再将user总的数据更新会list
function modify(){
    //表单验证
    if(user.nickname.trim().length==0){
        alert('姓名不可为空！');
        return;
    }

    if(user.name.trim().length==0){
        alert('昵称不可为空！');
        return;
    }

    if(user.gender!=='男'&&user.gender!='女'){
        alert('请填写正确性别');
        return;
    }
    let tmp=list.find(item=> item.id==user.id);
    //将user中的数据更新到tmp
    tmp.name=user.name;
    tmp.nickname=user.nickname;
    tmp.gender=user.gender;

      //添加之后，需要清空表单
      user.id='';
  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,user,edit,modify,handle}
    }
}

Vue.createApp(app).mount('.main');

function del(id){
    if(confirm('您确定删除该用户吗？')){
            //findIndex:返回满足条件的单元索引
    let index=list.findIndex(item=>{
        return item.id==id
    })
    //splice函数有两个参数，分别是要删除的单元索引和接下来要伸出的几个单元
    list.splice(index,1)
    }else{
        return;
    }
}

function add(){
//添加之前，需要对表单进行验证
if(user.nickname.trim().length==0){
    alert('姓名不可为空！');
    return;
}

if(user.name.trim().length==0){
    alert('昵称不可为空！');
    return;
}

if(user.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='';
}


写回答

1回答

好帮手慕小尤

2021-10-13

同学你好，同学在form表单中多了一个0，导致页面出现异常，如下所示：

https://img.mukewang.com/climg/616694840940b8c915980212.jpg

建议同学删除input标签中的0，然后刷新页面重新测试代码试一下。如下所示：

https://img.mukewang.com/climg/616694c80960724906110262.jpg

祝学习愉快！

0

0 学习 · 9886 问题

查看课程

相似问题

关于网页显示的问题

回答 1

关于html界面与vue界面跳转的问题

回答 1

页面不显示列表

回答 1

老师，学校提供的资料有问题，打开之后浏览器大小不适配

回答 1

小慕啊，我的页面打开是空白

回答 1

打开慕课网App查看更多内容