Vue实例-本地留言板

好久没有写新的笔记了，今天回想了一下之前学习的Vue知识，现在复习一遍，写写学习事的实例并加以修改一下：

本地记事本：

本地简单的留言板功能，后期其实可以添加盖楼功能的，但是目前先不考虑，大家也可以自己试着添加一下，后期我更新后会同步代码！

1、主要功能

（1）添加留言

（2）删除留言

（3）留言统计及删除

2、主要知识点：

（1）监听事件—–v-on/@

（2）list—–v-for

（3）数据绑定—–v-model

（4）v-show

代码示例：

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="robots" content="noindex, nofollow" /><meta name="googlebot" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>本地留言板</title><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><body><section id="app"><!-- 输入框 --><header class="header"><h1>本地留言板</h1><input v-model="temp.name" autofocus="autofocus" autocomplete="off" placeholder="请输入昵称"class="new-todo" /><input v-model="temp.text" autofocus="autofocus" autocomplete="off" placeholder="请输入留言内容"class="new-todo" /><button class="textbtn textbtn-red" @click="add">提交</button></header><!-- 记事本内容列表 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index">{{ index+1 }}.</span><label>昵称：<span style="color: red;">{{ item.name }}</span></label><label>留言内容：<span style="color:blue">{{ item.text }}</span></label><label>留言时间: <span style="color:green">{{ item.time }}</span></label><button class="destroy" @click="remove(index)"></button></div></li></ul></section><!-- 记事本统计信息 --><footer class="footer" v-show="list.length!=0"><span class="todo-count" v-if="list.length!=0"><strong>{{ list.length }}</strong> items left</span><button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button></footer></section><!-- 底部 --><footer class="info"><p>技术支持：<a href="http://www.mrnaas.com/" target="_blank" style="color: red;">MN乐享</a></p></footer><script src="utils/vue.js"></script><script src="utils/index.js"></script><script>var app = new Vue({el: '#app',data: {temp:{name:null,text:null},list: []},methods: {add: function () {let time = parseTime(Date())let obj = JSON.parse(JSON.stringify(this.temp))//为了防止错误发生，采用深拷贝if(obj.name && obj.text){obj.time = timethis.list.push(obj);}else{alert("留言昵称/留言内容必填！")}},remove: function (index) {console.log("删除");console.log(index);this.list.splice(index, 1);},clear: function () {this.list = [];}}})</script></body></html>

在线预览https://www.mrnaas.com/webdemo/Notepad/

链接: 百度网盘请输入提取码

提取码获取方法：

关注公众号发送：【留言板】

GitHub

GitHub - twang211/webdemo: 用于收藏webdemo

Vue实例-本地留言板相关推荐

php实现文件留言,PHP文件操作及实例：留言板
一.文件操作函数 1.创建文件:touch('./xxx.php'); bool touch ( string $filename [, int $time = time() [, int $atim ...
vue脚手架实现留言板功能
利用vue-cli创建的vue脚手架,实现留言板功能 1.搭建项目结构命令行中创建vue项目,在src路径下的assets文件夹中创建images文件夹存放用户头像,并新建一个pages文件夹用于存 ...
Vue入门 ---- 简易留言板
##简述初学vue,比Angular要简单易学一点,基本就是html代码+json.这是第一个小的例子,用到了vue的几个常用方法,其中v-for的$index稍微有点迷惑,也影响了完成的速度,网上 ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
React（05）：使用react完成简单留言板案例
前言之前学了react基本语法和jsx/组件化,这里还是用ts学习时候的本地留言板案例来实践一下之前的学习语法: 正文注意点引入react.react-dom.babel,development ...
使用Vue 2.0+本地储存，留言板
留言板思路 // 把对象添加到数组的最前面 unshift // 数据与表单进行绑定 v-model <!DOCTYPE html> <html><head>&l ...
vue生命周期，组件，slot替换，tab切换，简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...
vue实现留言板的功能_Vue实现简单的留言板
本文实例为大家分享了Vue实现简单的留言板的具体代码,供大家参考,具体内容如下 body { /* margin: 0; */ padding-left: 10px; } #app{ width: 4 ...
Vue基础案例（水果搜索，购物车，todolist,留言板，跑马灯)
Vue基础案例(水果搜索,购物车,todolist,留言板,跑马灯) 01.水果搜索案例思路以及运用知识点通过computed计算 keyword与list ,算出findlist 如果list中 ...

Vue实例-本地留言板

代码示例：

GitHub

Vue实例-本地留言板相关推荐

最新文章

热门文章