vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：
登入后：
登入前：
登录框:
注册框：
html代码部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link href="https://www.jb51.net/css/font-awesome.min.css" /> <link href="https://www.jb51.net/css/index.css" /> <script type="text/javascript" src="https://www.jb51.net/lib/vue.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/lib/jquery-1.11.3.min.js"></script> </head> <body> <div> <!--登录--> <div v-show="loginStatus" @click="loginboxClick()"> <div @click="stopProp()"> <h3>用户登录</h3> <form> <input type="text" placeholder="请输入用户名"> <input type="password" placeholder="请输入登录密码"> <input type="button" value="立即登录" @click="login()"> <input type="button" value="立即注册" @click="showregister()"> </form> </div> </div> <!--登录--> <!--注册--> <div v-show="registerStatus" @click="registerboxClick()"> <div @click="stopProp()"> <h3>用户注册</h3> <form> <input type="text" placeholder="请输入用户名"> <input type="password" placeholder="请输入登录密码"> <input type="button" value="立即注册" @click="register()"> <input type="button" value="立即登录" @click="showLogin()"> </form> </div> </div> <!--注册--> <!--评论--> <div> <div v-show="userbarStatus"> <img :src="'img/'+currentUser.userimg" alt="" title=""> <span @click="loginout()">退出账号 <i></i></span> <span v-text="currentUser.username"><i> </i></span> <p><span v-text="currentUser.words" contenteditable="false"></span><i @click="editUserWords()"></i></p> </div> <div> <dl v-for="(value, index) in comments "> <dt> <img :src=" 'img/'+value.userimg "> <span>{{value.username}}</span> </dt> <dd><i></i>{{value.words}}</dd> <dd> <span><i></i>点赞(<strong @click="like(index) ">{{value.like}}</strong>)</span> <span><i></i>点踩(<strong @click="notlike(index) ">{{value.nolike}}</strong>)</span> <span><i></i>时间<strong>{{value.time}}</strong></span> </dd> </dl> <div> <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代码部分