老师为什么界面显示不出来了

来源:4-3 添加用户

自然的诱惑

2022-08-18 08:33:05

https://img.mukewang.com/climg/62fd882b090fea6f03990366.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>添加新用户</h3>
                    <div class="form-group">
                      <label>姓名</label>
                      <input class="form-control" type="text" v-mode="user.name">
                    </div>
                    <div class="form-group">
                      <label>昵称</label>
                      <input class="form-control" type="text" v-mode="user.nikename">
                    </div>
                    <div class="form-group">
                      <label>性别</label>
                      <input class="form-control" type="text" v-mode="user.gender">
                    </div>
                    <div class="form-group">
                      <button class="btn-primary" type="button" @click="add">确定</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>

user.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:'aa',
    nikename:'bb',
    gender:'cc'
})

function del(id){
    if(confirm('您确定删除该用户吗?')){
        let index = list.findIndex(item=>item.id==id)
        list.splice(index,1);
    }
   
}

function add(){
    console.log(123);
}

const app={
    setup () {
        return {list,user,del,add}
    }
}


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


写回答

1回答

好帮手慕小尤

2022-08-18

同学你好,同学v-model书写错误,从而导致页面没有显示出来。则建议同学将v-mode修改为v-model。如下所示:

https://img.mukewang.com/climg/62fda3fb09fabb7908560310.jpg

祝学习愉快!

0

0 学习 · 9886 问题

查看课程