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 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
JS 事件机制完整示例分析
Jan 15 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
python 写的一个爬虫程序源码
2016/02/28 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
领导调研接待方案
2014/02/27 职场文书
党员公开承诺书
2014/03/25 职场文书
村党支部换届选举方案
2014/05/02 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
对学校的意见和建议
2015/06/04 职场文书
2016年母亲节广告语
2016/01/28 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers