vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：
登入后： 
登入前： 
登录框: 
注册框： 
html代码部分：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href="css/font-awesome.min.css" rel="external nofollow" /> <link rel="stylesheet" href="css/index.css" rel="external nofollow" /> <script type="text/javascript" src="../lib/vue.min.js"></script> <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script></head><body> <div id="comment"> <!--登录--> <div class="loginbox" v-show="loginStatus" @click="loginboxClick()" style="display:none;"> <div class="box" @click="stopProp()"> <h3>用户登录</h3> <form name="login" id="login"> <input type="text" placeholder="请输入用户名" class="username"> <input type="password" placeholder="请输入登录密码" class="psw"> <input type="button" value="立即登录" @click="login()"> <input type="button" value="立即注册" @click="showregister()" class="blueBtn"> </form> </div> </div> <!--登录--> <!--注册--> <div class="loginbox registerbox" v-show="registerStatus" @click="registerboxClick()" style="display:none;"> <div class="box" @click="stopProp()"> <h3>用户注册</h3> <form name="register" id="register"> <input type="text" placeholder="请输入用户名" class="username"> <input type="password" placeholder="请输入登录密码" class="psw"> <input type="button" value="立即注册" @click="register()"> <input type="button" value="立即登录" @click="showLogin()" class="blueBtn"> </form> </div> </div> <!--注册--> <!--评论--> <div class="commentbox"> <div class="userbar" v-show="userbarStatus" style="display:none;"> <img :src="'img/'+currentUser.userimg" alt="" title="" class="userimg"> <span class="loginout" @click="loginout()">退出账号 <i class="icon-style icon-signout"></i></span> <span class="username" v-text="currentUser.username"><i class="icon-style icon-user-md"> </i></span> <p><span class="userword" v-text="currentUser.words" contenteditable="false"></span><i class="icon-style icon-edit" @click="editUserWords()"></i></p> </div> <div class=" commemtlist "> <dl v-for="(value, index) in comments "> <dt> <img :src=" 'img/'+value.userimg "> <span class="username ">{{value.username}}</span> </dt> <dd class="commentwords "><i class="icon-style icon-file-alt "></i>{{value.words}}</dd> <dd class="btbar "> <span class="like red "><i class="icon-style icon-thumbs-up "></i>点赞(<strong @click="like(index) ">{{value.like}}</strong>)</span> <span class="notlike red "><i class="icon-style icon-thumbs-down "></i>点踩(<strong @click="notlike(index) ">{{value.nolike}}</strong>)</span> <span class="data red "><i class="icon-style icon-calendar "></i>时间<strong>{{value.time}}</strong></span> </dd> </dl> <div class="wordsbox "> <textarea placeholder="请输入留言 "></textarea> <span @click="showLogin()" v-show="lrBtnStatus">登录</span> <span @click="showregister()" v-show="lrBtnStatus">注册</span> <input type="submit" value="提交 " @click="subCommont()" /> </div> </div> </div> <!--评论--> </div></body></html><script src="js/index.js "></script>css代码部分：
* { margin: 0; padding: 0; font-size: 14px; font-family: "微软雅黑";}body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}#comment .loginbox { position: fixed; z-index: 99999; width: 100%; height: 100%; background: rgba(0, 0, 0, .85);}#comment .icon-style { margin-right: 5px; color: #999;}#comment .loginbox .box { height: 300px; width: 300px; padding: 40px 20px 20px 20px; margin: 100px auto; background: #fff;}#comment .loginbox .box h3 { font-size: 16px; font-family: "微软雅黑"; text-align: center;}#comment .loginbox .box input { height: 40px; width: 100%; border: 1px solid red; margin: 10px 0; border-radius: 2px;}#comment .loginbox .box input[type="button"] { background: red; color: #fff; font-family: "微软雅黑";}body #comment .loginbox .box .blueBtn { background: #0089FF; border: 1px solid #0089FF;}#comment .userbar { height: 200px; padding: 10px; text-align: center;}#comment .userbar .userimg { height: 100px; width: 100px; border-radius: 50px;}#comment .userbar .username { display: block; padding: 10px 0; font-size: 18px; color: red; font-weight: bolder;}#comment .commentbox { position: relative; top: 40px; width: 600px; padding: 20px 20px 30px 20px; background: #eee; margin: 0 auto;}#comment .commentbox .loginout { display: block; text-decoration: underline; color: blue; cursor: pointer;}#comment .commentbox .userword { outline: none;}#comment .commemtlist { padding: 10px;}#comment .commemtlist dl { padding: 20px 0; border-bottom: 1px solid #D2D2D2;}#comment .commemtlist dl dt { float: left; text-align: center; margin-right: 15px;}#comment .commemtlist dl dt img { height: 50px; width: 50px; border-radius: 25px;}#comment .commemtlist dl dd { padding-bottom: 10px;}#comment .commemtlist .btbar span { margin-right: 15px; font-size: 10px;}#comment .commemtlist .btbar .red strong { color: red; margin: 0 3px; font-weight: normal; cursor: pointer;}#comment .commemtlist .username { display: block; font-size: 12px; text-align: center;}#comment .commemtlist .wordsbox textarea { height: 100px; width: 100%; margin-top: 20px; margin-bottom: 10px; resize: none;}#comment .commemtlist .wordsbox span { font-size: 13px; margin-right: 15px; text-decoration: underline; color: blue; cursor: pointer;}#comment .commemtlist .wordsbox input { float: right; width: 80px; height: 28px; text-align: center; color: #fff; background: red; border: none; border-radius: 3px;}javascript代码部分
//日期格式化函数Date.prototype.format = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; } //创建vue实例var v = new Vue({ el: "#comment", data: { //原始用户评论信息 comments: [{ username: "张三", userimg: "user02.jpg", words: "这历史可以啊，不错不错。呵呵！", like: 87, nolike: 53, time: "2017-02-17 09:15:25" }, { username: "李四", userimg: "user01.jpg", words: "吃饭去了啊。呵呵！", like: 23, nolike: 63, time: "2017-3-27 10:12:34" }, { username: "王五", userimg: "user03.jpg", words: "这评论可以。呵呵！", like: 27, nolike: 33, time: "2017-04-02 03:26:54" }], //原始用户信息 users: [{ username: "zhangsan", password: "123456", userimg: "user.jpg", words: "世界那么大我想去看看。" }, { username: "zyc", password: "123456", userimg: "user01.jpg", words: "雨过天晴的美好。" }, { username: "admin", password: "123456", userimg: "user02.jpg", words: "下大雨了，怎么办啊。" }], //当前用户信息 currentUser: { username: "", words: "", userimg: "" }, //登录框显示或隐藏状态 loginStatus: false, //注册框显示或隐藏状态 registerStatus: false, //用户信息栏显示或隐藏状态 userbarStatus: false, //登录注册入口显示或隐藏状态 lrBtnStatus: true }, methods: { //点击登录 showLogin: function() { document.getElementById("login").reset(); this.loginStatus = true; this.registerStatus = false; }, //点击注册 showregister: function() { document.getElementById("register").reset(); this.loginStatus = false; this.registerStatus = true; }, //退出登录 loginout: function() { //清空当前用户数据 this.currentUser.username = ""; this.currentUser.words = ""; this.currentUser.userimg = ""; alert("退出成功！"); this.userbarStatus = false; //登录或注册入口显示 this.lrBtnStatus = true; }, //登录遮罩层点击事件 loginboxClick: function() { this.loginStatus = false; }, //注册遮罩层点击事件 registerboxClick: function() { this.registerStatus = false; }, //点击登录或注册框阻止事件冒泡 stopProp: function(e) { e = e || event; e.stopPropagation(); }, //点赞 like: function(index) { this.comments[index].like++; }, //点踩 notlike: function(index) { this.comments[index].nolike++; }, //登录 login: function() { var username = $(".loginbox").find(".username").val(); //获取用户名 var psw = $(".loginbox").find(".psw").val() //获取密码 var flag = false; for (var i = 0, len = this.users.length; i < len; i++) { //判断用户名密码是否正确 if (this.users[i].username === username && this.users[i].password === psw) { flag = true; alert("登录成功！"); //用户登录框消失 this.loginStatus = false; //用户登录信息显示 this.userbarStatus = true; //设置用户栏信息 this.currentUser.username = this.users[i].username; this.currentUser.words = this.users[i].words; this.currentUser.userimg = this.users[i].userimg; //登录或注册入口消失 this.lrBtnStatus = false; break; } } if (!flag) { alert("输入的账号或密码不正确！"); document.getElementById("login").reset(); } }, //注册 register: function() { var obj = {}; //创建用户账号密码容器 var flag = false; var username = $(".registerbox").find(".username").val(); //获取用户名 var psw = $(".registerbox").find(".psw").val() //获取密码 //判断用户名是否存在 for (var i = 0, len = this.users.length; i < len; i++) { if (this.users[i].username === username) { flag = true; alert("该用户名已经被注册！"); break; } } if (!flag) { if (username == "" || psw == "") { alert("账号和密码不能为空！"); } else { var randomNum = Math.floor(Math.random() * 5) + 1; //随机生成头像 var randomImg = "user0" + randomNum + ".jpg"; obj.username = username; obj.password = psw; obj.words = "系统默认标语。" obj.userimg = randomImg; //添加用户信息到用户列表 this.users.push(obj); alert("注册成功！"); //设置用户信息栏显示 this.userbarStatus = true; //设置用户栏信息 this.currentUser.username = obj.username; this.currentUser.words = obj.words; this.currentUser.userimg = obj.userimg; //登录或注册入口消失 this.lrBtnStatus = false; //重置表单数据 document.getElementById("register").reset(); //注册框消失 this.registerStatus = false; } } }, //编辑用户心情 editUserWords: function() { var wordsObj = $(".commentbox").find(".userword"); var edit = wordsObj.attr("contenteditable"); //获取元素的H5可编辑属性 if (edit == "false") { //打开可编辑功能 wordsObj.attr("contenteditable", "true"); } else { for (var i = 0, len = this.users.length; i < len; i++) { //查找对应用户名 if (this.users[i].username === this.currentUser.username) { //改变用户信息里面的words数据 this.currentUser.words = $(".commentbox").find(".userword").text(); this.users[i].words = this.currentUser.words; //关闭可编辑功能 wordsObj.attr("contenteditable", "false"); alert("保存成功！"); } } } }, //点击提交评论 subCommont: function() { if (!this.userbarStatus) { alert("登录之后才可以评论！"); this.loginStatus = true; } else { if ($(".wordsbox textarea").val() == "") { alert("请先填写评论内容！"); } else { var obj = {}; //评论信息对象的容器 obj.username = this.currentUser.username; obj.userimg = this.currentUser.userimg; obj.words = $(".wordsbox textarea").val(); obj.like = 0; obj.nolike = 0; obj.time = new Date().format("yyyy-MM-dd hh:mm:ss"); //将评论信息压入评论信息列表 this.comments.push(obj); alert("评论成功！"); $(".wordsbox textarea").val(""); } } } }});github效果在线预览
仓库地址：https://github.com/zhongyoucong/vuejs/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
