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处理VBArray的函数使用说明
May 11 Javascript
常用的javascript function代码
May 23 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
js+canvas实现验证码功能
Sep 21 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代码
2013/03/24 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
详解Vue之计算属性
2020/06/20 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
django 环境变量配置过程详解
2019/08/06 Python
django 读取图片到页面实例
2020/03/27 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
资深地理教师自我评价
2013/09/21 职场文书
毕业生造价工程师求职信
2013/10/17 职场文书
护理学专业推荐信
2013/12/03 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
长江七号观后感
2015/06/11 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
深度学习详解之初试机器学习
2021/04/14 Python