介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title> & lt;/title>
& lt;链接rel=皊tylesheet"类型=拔谋?css"href=癱ss/bootstrap.css"/比;
& lt;风格类型=拔谋?css"比;
身体{/*保证金:0;*/padding-left: 10 px;
}
#应用{
宽度:400 px;
高度:汽车;
}
.form-group {
margin-top: 10 px;
}
.form-group textarea {
调整:没有;
身高:144 px;
宽度:391 px;
border - radius: 5 px;
padding-left: 16 px;
行高:16 px;
padding-top: 10 px;
字体大小:16 px;
}
.content {
身高:244 px;
宽度:391 px;
border - radius: 5 px;
padding-left: 16 px;
行高:10 px;
padding-top: 10 px;
字体大小:16 px;
边界:1 px固体# ccc;
位置:相对;
padding-right: 10 px;
margin-bottom: 10 px;/*纯字母或者数字导致不能换行*/单词分割:打破所有;
自动换行:break-word;
}
.p_img {
高度:60 px;
宽度:65 px;
background - color: # ccc;
}
.p_img> img {
显示:块;
高度:100%;
宽度:100%;
}
.p_cont {
位置:绝对的;
上图:10 px;
左:85 px;
行高:24 px;
padding-right: 10 px;
宽度:300 px;
高度:汽车;
background - color: # ccc;
}
一种{
位置:绝对的;
左:13 px;
前:85像素;
}
.timeDate {
位置:绝对的;
右:10 px;
底部:10 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
action=& lt;形式“#”;方法=?“在
& lt; div类=癴orm-group"祝辞
& lt;标签=皍sename"祝辞用户名:& lt;/label>
& lt;输入类型=皌ext"name=皍sername"id=皍sername"v模型=皍sername"占位符=扒胧淙朊帧氨?
& lt;/div>
& lt; div类=癴orm-group"祝辞
& lt; p> & lt;标签=癱ont"在评论内容:& lt;/label> & lt;/p>
& lt; textarea v模型=癱ont"占位符=扒胧淙肽谌荨白４? lt;/textarea>
& lt;/div>
& lt; div类=癴orm-group"比;
& lt;输入类型=癰utton"值=疤砑印?@click=癮dd"比;
& lt;输入类型=皉eset"值=吧境?@click=皉emove()“比;
& lt;/div>
& lt;/form>
& lt; div v-show=皌his.arr。长度==0,在暂无留言& lt;/div>
& lt; div类=癱ontent"v代表=跋頰rr"比;
& lt; div类=皃_img"祝辞
& lt; img src=癷mgUrl"祝辞& lt;/img>
& lt;/div>
& lt; div类=叭嗣癖?
{{item.username}}
& lt;/div>
& lt; div类=皃_cont"祝辞
& lt; span> {{item.cont}} & lt;/span>
& lt;/div>
& lt; div类=皌imeDate"祝辞
{{项目。计时器| dataFormat}}
& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本src=癹s/vue.js"类型=拔谋?javascript"charset=皍tf-8"祝辞& lt;/script>
& lt; script>//定义全局过滤器进行时间格式化
Vue.filter (& # 39; dataFormat& # 39;,函数(dataStr模式){//根据给定的时间字符串,得到特定的时间
console.log (dataStr)
var dt=新日期(dataStr)
var y=dt.getFullYear ()
var m=dt.getMonth ()
var d=dt.getDate ()//返回$ {y} - {m} - {d}’美元
如果(模式,,pattern.toLowerCase ()===& # 39; yyyy-mm-dd& # 39;) {
返回“$ {y} - {m + 1} -美元$ {d} '
其他}{
var hh=dt.getHours ()
var毫米=dt.getMinutes ()
var党卫军=dt.getSeconds ()
返回“$ {y}年$ {m + 1}月$ {d}日$ {hh}: $ {mm}: ${党卫军}'
}
})
应用var=new Vue ({
艾尔:& # 39;#应用# 39;
数据:{
用户名:& # 39;& # 39;
续:& # 39;& # 39;
加勒比海盗:[],
imgUrl:“。//people.jpg"图像,//imgUrl:“http://wx2.sinaimg.cn/bmiddle/006WWRhNgy1gbn1bc3itdj31410u0q7y.jpg"//指数:0
ctime:新的日期()
},
方法:{
add () {
this.arr.unshift ({
用户名:this.username,
续:this.cont,
计时器:this.ctime
})；
这一点。用户名=& # 39;& # 39;;
这一点。续=?“;
这一点。计时器=?“
},
删除(索引){
this.arr。拼接(指数(1);
}
}
})；
& lt;/script>
& lt;/body>
& lt;/html>
这期内容当中小编将会给大家带来有关使用Vue实现留言板功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
效果图:
