欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js實現(xiàn)用戶評論、登錄、注冊、及修改信息功能

 更新時間：2021年11月11日 10:22:54   作者：codingNoob  
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)用戶評論、登錄、注冊、及修改信息功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue.js實現(xiàn)用戶評論、登錄、注冊、及修改用戶部分信息功能代碼。效果圖如下：

登入后：

登入前：

登錄框:

注冊框：

html代碼部分：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <title>index</title>
 <link rel="stylesheet" href="css/font-awesome.min.css" />
 <link rel="stylesheet" href="css/index.css" />
 <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()">退出賬號&nbsp;&nbsp;<i class="icon-style icon-signout"></i></span>
    <span class="username" v-text="currentUser.username"><i class="icon-style icon-user-md">&nbsp;</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代碼部分

//日期格式化函數(shù)
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;
 }
 //創(chuàng)建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: "" },
  //登錄框顯示或隱藏狀態(tài)
  loginStatus: false,
  //注冊框顯示或隱藏狀態(tài)
  registerStatus: false,
  //用戶信息欄顯示或隱藏狀態(tài)
  userbarStatus: false,
  //登錄注冊入口顯示或隱藏狀態(tài)
  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() {
   //清空當前用戶數(shù)據(jù)
   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 = {}; //創(chuàng)建用戶賬號密碼容器
   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 = "系統(tǒng)默認標語。"
     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;
     //重置表單數(shù)據(jù)
     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數(shù)據(jù)
      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/

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • VUE實現(xiàn)強制渲染,強制更新

    VUE實現(xiàn)強制渲染,強制更新

    今天小編就為大家分享一篇VUE實現(xiàn)強制渲染,強制更新，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue中的$emit 與$on父子組件與兄弟組件的之間通信方式

    vue中的$emit 與$on父子組件與兄弟組件的之間通信方式

    本文主要對vue 用$emit 與 $on 來進行組件之間的數(shù)據(jù)傳輸。重點給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，感興趣的朋友一起看看
    2018-05-05
  • Vue前端項目部署IIS的實現(xiàn)

    Vue前端項目部署IIS的實現(xiàn)

    這篇文章主要介紹了Vue前端項目部署IIS的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • 深入探討Vue.js組件和組件通信

    深入探討Vue.js組件和組件通信

    這篇文章主要和大家一起深入探討Vue.js組件和組件通信的相關資料，感興趣的小伙伴們可以參考一下
    2016-09-09
  • vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法

    vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法

    這篇文章主要介紹了vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • vue基于viewer實現(xiàn)的圖片查看器功能

    vue基于viewer實現(xiàn)的圖片查看器功能

    這篇文章主要介紹了vue基于viewer實現(xiàn)的圖片查看器的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • 使用Element的InfiniteScroll 無限滾動組件報錯的解決

    使用Element的InfiniteScroll 無限滾動組件報錯的解決

    這篇文章主要介紹了使用Element的InfiniteScroll 無限滾動組件報錯的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • vue-router：嵌套路由的使用方法

    vue-router：嵌套路由的使用方法

    本篇文章主要介紹了vue-router：嵌套路由的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 詳解vue3中如何使用shaka-player

    詳解vue3中如何使用shaka-player

    這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • vue + element-ui實現(xiàn)簡潔的導入導出功能

    vue + element-ui實現(xiàn)簡潔的導入導出功能

    Element-UI是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,手機端有對應框架是 Mint UI，下面這篇文章主要給大家介紹了關于利用vue + element-ui如何實現(xiàn)簡潔的導入導出功能的相關資料，需要的朋友可以參考下。
    2017-12-12

最新評論