Vue实现简单的留言板
更新时间：2020年10月23日 11:55:07 作者：maxiaoxin1314
这篇文章主要为大家详细介绍了Vue实现简单的留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现简单的留言板的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<style type="text/css">
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;
}
</style>
</head>
<body>
<div id="app">
<form action="#" method="">
<div class="form-group">
<label for="usename">用户名:</label>
<input type="text" name="username" id="username" v-model="username" placeholder="请输入名字">
</div>
<div class="form-group">
<p><label for="cont">评论内容:</label></p>
<textarea v-model="cont" placeholder="请输入内容"></textarea>
</div>
<div class="form-group" style="text-align: center;">
<input type="button" value="添加" @click="add">
<input type="reset" value="删除" @click="remove()">
</div>
</form>
<div v-show="this.arr.length == 0">暂无留言</div>
<div class="content" v-for="item in arr">
<div class="p_img">
<img :src="imgUrl"></img>
</div>
<div class="people">
{{item.username}}
</div>
<div class="p_cont">
<span>{{item.cont}}</span>
</div>
<div class="timeDate">
{{item.timer | dataFormat}}
</div>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
// 定义全局过滤器进行时间格式化
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);
}
}
});
</script>
</body>
</html>
效果图：
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue登录页面回车执行事件@keyup.enter.native问题
这篇文章主要介绍了vue登录页面回车执行事件@keyup.enter.native问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，这篇文章主要介绍了vuex 中插件的编写案例,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue slot与传参实例代码讲解，在文章末尾给大家介绍了vue 利用slot向父组件传值的方法,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue3 vuex4 store的响应式取值问题，在实际生活中遇到这样一个问题:在页面中点击按钮,数量增加,值是存在store中的,点击事件值没变,如何解决这个问题，本文给大家分享解决方法，需要的朋友可以参考下2022-08-08
本篇文章主要介绍了Vuex之理解Store的用法，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中2017-04-04
这篇文章主要给大家介绍了关于vue打包后dist文件在本地启动运行的简单步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue 集成 sweetalert2 提示组件的问题，本文通过项目案例实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
解读element-ui使用el-upload,before-upload函数不好使的问题
这篇文章主要介绍了解读element-ui使用el-upload,before-upload函数不好使的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue通过 API 监听数组的变化,在 Vue 中，你可以通过监听数组的变化来更新界面，Vue 提供了一些特殊的语法以及 API 来实现对数组的监听，本文通过实例代码介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论