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/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
