vue.js实现用户评论、登录、注册、及修改信息功能

vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：

登入后：

@H_404_6@

登入前：

这里写图片描述

登录框:

这里写图片描述

注册框：

这里写图片描述

HTML代码部分：

<Meta charset="utf-8"> index

Box" v-show="loginStatus" @click="loginBoxClick()" style="display:none;">

Box" @click="stopProp()">

用户 登录

<!--注册-->
<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;"&gt;
  <div class="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" @click="stopProp()"&gt;
    <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"&gt;
      <input type="text" placeholder="请输入<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>" class="username"&gt;
      <input type="password" placeholder="请输入<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>密码" class="psw"&gt;
      <input type="button" value="立即<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>" @click="register()"&gt;
      <input type="button" value="立即<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>" @click="showLogin()" class="blueBtn"&gt;
    </form>
  </div>
</div>
<!--注册-->

<!--评论-->
<div class="comment<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;
  <div class="userbar" v-show="userbarStatus" style="display:none;"&gt;
    <img :src="'img/'+currentUser.userimg" alt="" title="" class="userimg"&gt;
    <span class="loginout" @click="loginout()"&gt;<a href="https://www.jb51.cc/tag/tuichu/" target="_blank" class="keywords">退出</a>账号<i class="icon-style icon-signout"&gt;</i></span>
    <span class="username" v-text="currentUser.username"&gt;<i class="icon-style icon-user-md"&gt;</i></span>
    <p><span class="userword" v-text="currentUser.words" contenteditable="false"&gt;</span><i class="icon-style icon-edit" @click="editUserWords()"&gt;</i></p>
  </div>
  <div class=" commemtlist "&gt;
    <dl v-for="(value,index) in comments "&gt;
      <dt>
        <img :src=" 'img/'+value.userimg "&gt;
        <span class="username "&gt;{{value.username}}</span>
      </dt>
      <dd class="commentwords "&gt;<i class="icon-style icon-file-alt "&gt;</i>{{value.words}}</dd>
      <dd class="btbar "&gt;
        <span class="like red "&gt;<i class="icon-style icon-thumbs-up "&gt;</i>点赞(<h3 @click="like(index) "&gt;{{value.like}}</h3>)</span>
        <span class="notlike red "&gt;<i class="icon-style icon-thumbs-down "&gt;</i>点踩(<h3 @click="notlike(index) "&gt;{{value.nolike}}</h3>)</span>
        <span class="data red "&gt;<i class="icon-style icon-calendar "&gt;</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> "&gt;
      <textarea placeholder="请输入留言 "&gt;</textarea>
      <span @click="showLogin()" v-show="lrBtnStatus"&gt;<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a></span>
      <span @click="showregister()" v-show="lrBtnStatus"&gt;<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a></span>
      <input type="submit" value="提交 " @click="subCommont()" />
    </div>
  </div>
</div>
<!--评论-->

vue.js实现用户评论、登录、注册、及修改信息功能

登入后：

登入前：

登录框:

注册框：

用户登录

猜你在找的Vue相关文章