老师为什么界面显示不出来了
来源:4-3 添加用户
自然的诱惑
2022-08-18 08:33:05
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回答
同学你好,同学v-model书写错误,从而导致页面没有显示出来。则建议同学将v-mode修改为v-model。如下所示:
祝学习愉快!
相似问题