vue实现留言板的功能_Vue实现简单的留言板

本文实例为大家分享了Vue实现简单的留言板的具体代码，供大家参考，具体内容如下

body {

/* margin: 0; */

padding-left: 10px;

}

#app{

width: 400px;

height: auto;

}

.form-group {

margin-top: 10px;

}

.form-group textarea {

resize: none;

height: 144px;

width: 391px;

border-radius: 5px;

padding-left: 16px;

line-height: 16px;

padding-top: 10px;

font-size: 16px;

}

.content{

height: 244px;

width: 391px;

border-radius: 5px;

padding-left: 16px;

line-height: 10px;

padding-top: 10px;

font-size: 16px;

border:1px solid #ccc;

position: relative;

padding-right: 10px;

margin-bottom: 10px;

/* 纯字母或者数字导致不能换行 */

word-break:break-all;

word-wrap:break-word;

}

.p_img{

height: 60px;

width: 65px;

background-color: #ccc;

}

.p_img>img{

display: block;

height: 100%;

width: 100%;

}

.p_cont{

position: absolute;

top: 10px;

left: 85px;

line-height: 24px;

padding-right: 10px;

width: 300px;

height: auto;

background-color: #ccc;

}

.people{

position: absolute;

left: 13px;

top: 85px;

}

.timeDate{

position: absolute;

right: 10px;

bottom: 10px;

}

用户名:

评论内容:

暂无留言

{{item.username}}

{{item.cont}}

{{item.timer | dataFormat}}

// 定义全局过滤器进行时间格式化

Vue.filter('dataFormat', function(dataStr, pattern) {

// 根据给定的时间字符串，得到特定的时间

console.log(dataStr)

var dt = new Date(dataStr)

var y = dt.getFullYear()

var m = dt.getMonth()

var d = dt.getDate()

// return `${y} - ${m} -${d}`

if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {

return `${y} - ${m+1} -${d}`

} else {

var hh = dt.getHours()

var mm = dt.getMinutes()

var ss = dt.getSeconds()

return `${y}年${m+1}月${d}日 ${hh}:${mm}:${ss}`

}

})

var app = new Vue({

el: '#app',

data: {

username: '',

cont:'',

arr: [],

imgUrl:"./images/people.jpg",

// imgUrl:"http://wx2.sinaimg.cn/bmiddle/006WWRhNgy1gbn1bc3itdj31410u0q7y.jpg",

// index:0

ctime:new Date()

},

methods: {

add(){

this.arr.unshift({

username:this.username,

cont:this.cont,

timer:this.ctime

});

this.username = '';

this.cont = "";

this.timer = ""

},

remove(index){

this.arr.splice(index, 1);

}

}

});

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

本文标题: Vue实现简单的留言板

本文地址: http://www.cppcns.com/wangluo/javascript/356908.html