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页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jQuery.each使用详解
Jul 07 Javascript
JS提交form表单实例分析
Dec 10 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
有关php运算符的知识大全
2011/11/03 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
js获取url传值的方法
2015/12/18 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
python文件与目录操作实例详解
2016/02/22 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
django query模块
2019/04/20 Python
python-地图可视化组件folium的操作
2020/12/14 Python
C#可否对内存进行直接的操作
2015/02/26 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
廉政教育心得体会
2014/01/01 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
甜品店创业计划书
2014/08/14 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书