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 相关文章推荐
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
bootstrap table小案例
Oct 21 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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
咖啡知识大全
2021/03/03 新手入门
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
python回调函数中使用多线程的方法
2017/12/25 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
大学生的网上创业计划书
2013/12/31 职场文书
党校培训思想汇报
2014/01/03 职场文书
《问银河》教学反思
2014/02/19 职场文书
中学生自我评价范文
2015/03/03 职场文书
毕业论文致谢信
2015/05/14 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL