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 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
PassWord输入框代码分享
Jun 07 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
vue移动端屏幕适配详解
Apr 30 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
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 冲泡冲煮
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
详谈PHP编码转换问题
2015/07/28 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
js选项卡的实现方法
2015/02/09 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
Python设计模式之观察者模式实例
2014/04/26 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python模块导入的细节详解
2018/12/10 Python
基于Python实现用户管理系统
2019/02/26 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
Python实现元素等待代码实例
2019/11/11 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
全陪导游欢迎词
2014/01/17 职场文书
党员作风建设自查报告
2014/10/23 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
PHP中->和=>的意思
2021/03/31 PHP