Vue实现简单的留言板


Posted in Javascript onOctober 23, 2020

本文实例为大家分享了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实现简单的留言板

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 #Javascript
JavaScript实现简易计算器小功能
Oct 22 #Javascript
vue实现简单加法计算器
Oct 22 #Javascript
微信小程序实现选项卡滑动切换
Oct 22 #Javascript
微信小程序实现文件预览
Oct 22 #Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 #Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 #Javascript
You might like
php知道与问问的采集插件代码
2010/10/12 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python 绘制场景热力图的示例
2020/09/23 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
园林设计专业毕业生求职信
2014/03/23 职场文书
网络优化专员求职信
2014/05/04 职场文书
大学班级文化建设方案
2014/05/06 职场文书
个人承诺书格式
2014/06/03 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
导游词之井冈山
2019/11/20 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python