Vue之简易的留言板功能
今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板!
LES'T GO!
首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交!
具体代码如下:
<body>
<div id="app">
<input type="text" v-model="txt">
<button @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
这里的i是索引的值,我们需要设置点击删除操作,而留言从第一楼开始往下通过序列展示!
然后我们继续事件提供实现体,对数据进行渲染
<script>
new Vue({
el: '#app',
data: {
txt: '',
// msg_arr: ['初始留言1', '初始留言2']
msg_arr: []
},
methods: {
send_msg: function () {
// this.txt
// this.msg_arr
if (this.txt) {
this.msg_arr.push(this.txt);
this.txt = ''
}
},
delete_msg: function (index) {
this.msg_arr.splice(index, 1)
}
}
})
</script>
这里通过splice对索引进行删除操作,而文本内容则通过push添加进序列中
具体实现效果如下:
这样一个简易的留言展示功能便完成了,如果你觉得很粗糙的话还可以通过样式对其进行修改,最后可以将这个功能添加到自己的项目中!
整体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="txt">
<button @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
txt: '',
// msg_arr: ['初始留言1', '初始留言2']
msg_arr: []
},
methods: {
send_msg: function () {
// this.txt
// this.msg_arr
if (this.txt) {
this.msg_arr.push(this.txt);
this.txt = ''
}
},
delete_msg: function (index) {
this.msg_arr.splice(index, 1)
}
}
})
</script>
</html>
Vue之简易的留言板功能的更多相关文章
- jsp中运用application实现共享留言板功能
jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...
- Web开发从零单排之二：在自制电子请帖中添加留言板功能,SAE+PHP+MySql
在上一篇博客中介绍怎样在SAE平台搭建一个html5的电子请帖网站,收到很多反馈,也有很多人送上婚礼的祝福,十分感谢! web开发从零学起,记录自己学习过程,各种前端大神们可以绕道不要围观啦 大婚将至 ...
- 利用反馈字段给帝国cms添加留言板功能（图文教程）
帝国cms的插件中提供信息反馈字段,很多人却不会用.这里谢寒教大家如何来给自己的帝国cms网站添加留言板功能 1.找到添加地址 2.添加字段 3.你可以在字段中添加多种字段类型(有文本域,单行文本框, ...
- php实现留言板功能
这个小小的留言板功能适合班级内或者公司内部之间的讨论,对话和留言,非常的方便,更重要的是无需网络,对于公司管理层来说是非常乐于常见的, 下面是这个留言板的写法: 1 首先是登录页面: <form ...
- 使用PHP连接数据库实现留言板功能
PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html> <head> <meta charset=&qu ...
- Vue 实现复制到粘贴板功能
vue 实现复制到粘贴板功能需要依赖到 clipboard.js 1. 首先需要安装依赖 * 出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2 ...
- JS原生编写实现留言板功能
实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = ...
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- 用php(session)实现留言板功能----2017-05-09
要实现留言功能,发送者和接受者必不可少,其次就是留言时间留言内容. 要实现的功能: 1.登录者只能查看自己和所有人的信息,并能够给好友留言 2.留言板页面,好友采取下拉列表,当留言信息为空时,显示提示 ...
随机推荐
- Python 2.x和3.x不同点
1.print和print() 2.yield 出现下面的错误Traceback (most recent call last): File “<pyshell#32>”, line 1, ...
- 14.JAVA-jar命令使用
介绍 jar命令用来对*.class文件进行压缩,从而生成jar(archive)归档文件,避免文件过多. 定义一个文件: package common.demo ; public class Tes ...
- eclipse之插件添加
在ftp.properties文件中,中文出现十六进制显示情况,如下: 解决该问题只需要在eclipse中下载一个插件即可解决, 步骤: help ---> install new softw ...
- git简易使用指南
git简易使用指南 Git是一个分布式版本控制/软件配置管理软件,原是Linux内核开发者林纳斯·托瓦兹(Linus Torvalds)为更好地管理Linux内核开发而设计.应注意的是,这与GNU I ...
- 我的Linux学习之路的感悟
首先要跟大家说声抱歉,这么久一直没有更新,有负大家对我的期望. 半年的Linux运维的学习到目前已工作一个月零9天,这一路走来的艰辛和挣扎只有自己最清楚. 首先要感谢公司的同事的宽容接纳和耐心指点.感 ...
- css img 等比例自动缩放
按父容器宽度自动缩放,并且保持图片原本的长宽比 img{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
- C#做项目时的一些经验分享
1.对于公用的类型定义,要单独抽取出来,放到单独的DLL中. 2.通过大量定义interface接口,来提高模块化程度,不同功能之间通过实现接口来面向接口编程. 3.如果项目中存在很多非常相似,但是又 ...
- Luogu [P2814] 家谱
题目链接 这个题不难,但是有点小小坑. 首先并查集肯定能看出来. 然后字符串的话,一开始我想用 hash 来处理,但想了想,离散化不好搞,人也太多了,一不小心就hash重了,还是算了. 然后就想到了S ...
- Activiti学习记录(二)
1.初始化数据库 使用工作流引擎创建23张表 public class TestActiviti { /** * 使用代码创建工作流需要的23张表 */ @Test public void creat ...
- 操作DOM -------JavaScrip
本文摘要:http://www.liaoxuefeng.com/ 经常用到. 由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记 ...