初学:vue的data值不显示

PCMHG 2019-04-28 12:27:48
之前在网站上模仿别人写的可以登录注册以及评论的功能,写出来后发现data不显示,求大佬指导一下!
这是html5代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LoginPage</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="lib/vue.min.js" type="text.javascript" charset="utf-8"></script>
<script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></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="type your name" class="username"/>
<input type="password" placeholder="type your password" class="psw"/>
<input type="button" value="立即登录" @click="login()"/>
<input type="button" value="立即注册" @click="showregister()" class="blueBtn"/>
</form>
</div>
</div>
<!--登录-->

<!--注册-->
<div class="loginbox" v-show="registerStatus" @click="registerboxClick()" style="display:none;">
<div class="box" @click="stopProp()">
<h3>用户注册</h3>
<form name="register" id="register">
<input type="text" placeholder="type your name" class="username"/>
<input type="password" placeholder="type your password" 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" class="userimg"/>
<span class="loginout" @cllick="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>
</div>

<div class="commentlist">
<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="data red"><i class="icon-style icon-calender"></i>时间<strong>{{value.time}}</strong></span>
</dd>
</dl>
<div class="wordsbox">
<textarea placeholder="type your comments"></textarea>
<span @click="showLogin()" v-show="lrBtnStatus">登录</span>
<span @click="showregister()" v-show="lrBtnStatus">注册</span>
<input type="button" value="提交" @click="subCommont()"/>
</div>
</div>
</div>
<!--评论-->
</div>
</body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

这是js代码
//日期格式化函数
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
}


var v=new Vue({
el:'#comment',
data: {

//原始用户信息
comments: [{
username: '张三',
userimg: '2.jpg',
words: '这历史不错,哈哈哈',
time: "2017-02-17 09:15:25"
}, {
username: '李四',
userimg: '1.jpg',
words: '这历史不错,嘻嘻嘻',
time: "2017-03-17 10:12:34"
}, {
username: '王五',
userimg: '3.jpg',
words: '这历史不错,呵呵呵',
time: "2017-04-17 03:26:54"
}
],
//原始用户信息
users: [{
username: 'zhangsan',
password: '123456',
userimg: 'user.jpg'
}, {
username: 'zyc',
password: '123456',
userimg: 'user.jpg'
}, {
username: 'admin',
password: '123456',
userimg: 'user02.jpg'
}
],
currentUser: {username: '', 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.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()
},


}
})


做出来以后的效果应该是图1,并且登录注册按钮都可以打开登录注册界面;但是我的运行出来却是图2,并且所有按钮都不能点。求大佬指导!(我有添加vue.min.js)
...全文
361 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,993

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧