vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下:
登入后:
登入前:
登录框:
注册框:
HTML代码部分:
<Meta charset="utf-8">
index
Box" v-show="loginStatus" @click="loginBoxClick()" style="display:none;">
<!--注册-->
<div class="login<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> register<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" v-show="registerStatus" @click="register<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Click()" style="display:none;">
<div class="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" @click="stopProp()">
<h3><a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a></h3>
<form name="register" id="register">
<input type="text" placeholder="请输入<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>" class="username">
<input type="password" placeholder="请输入<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>密码" class="psw">
<input type="button" value="立即<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>" @click="register()">
<input type="button" value="立即<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>" @click="showLogin()" class="blueBtn">
</form>
</div>
</div>
<!--注册-->
<!--评论-->
<div class="comment<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>">
<div class="userbar" v-show="userbarStatus" style="display:none;">
<img :src="'img/'+currentUser.userimg" alt="" title="" class="userimg">
<span class="loginout" @click="loginout()"><a href="https://www.jb51.cc/tag/tuichu/" target="_blank" class="keywords">退出</a>账号<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>点赞(<h3 @click="like(index) ">{{value.like}}</h3>)</span>
<span class="notlike red "><i class="icon-style icon-thumbs-down "></i>点踩(<h3 @click="notlike(index) ">{{value.nolike}}</h3>)</span>
<span class="data red "><i class="icon-style icon-calendar "></i>时间<h3>{{value.time}}</h3></span>
</dd>
</dl>
<div class="words<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> ">
<textarea placeholder="请输入留言 "></textarea>
<span @click="showLogin()" v-show="lrBtnStatus"><a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a></span>
<span @click="showregister()" v-show="lrBtnStatus"><a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a></span>
<input type="submit" value="提交 " @click="subCommont()" />
</div>
</div>
</div>
<!--评论-->