22.VUE学习之-replice删除当前评论条数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<li v-for="(v,k) in comments">
<!--把当前为第几次传给remove函数-->
{{k}}=>{{v.content}} <button v-on:click="remove(k)">删除</button>
</li>
<textarea v-model="current_content" cols="30" rows="10"></textarea><br>
<button v-on:click="push('end')">发表到后面</button>
<button v-on:click="push('pre')">发表到前面</button>
<br>
<button v-on:click="del('last')">删除最后一条评论</button>
<button v-on:click="del('first')">删除第一条评论</button>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
//当前用户输入内容
current_content: '',
comments: [
{content: '后盾人'},
{content: '向军老师'},
]
},
methods: {
remove(k){
this.comments.splice(k,1); //循环从当前条数开始移到1条数据
},
push(type){
var content = {content: this.current_content}
switch (type) {
case 'end':
this.comments.push(content);
break;
case 'pre':
this.comments.unshift(content);
break;
}
this.current_content = '';
},
del(type){
switch (type) {
case 'last':
this.comments.pop();
break;
case 'first':
this.comments.shift();
break;
}
}
}
});
</script>
</body>
</html>
效果:
22.VUE学习之-replice删除当前评论条数的更多相关文章
- Vue学习之todolist删除功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 24.VUE学习之-变异方法filter与regexp实现评论搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法splice删除评论功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- Vue 变异方法sort&reverse对评论进行排序
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue学习之路---No.4（分享心得，欢迎批评指正）
这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说. 老规矩,先回顾一下上一次的重点: 1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
随机推荐
- 二，JVM 自带命令行工具之JStat
jstat:虚拟机统计信息见识工具 jstat是用于见识虚拟机各种运行状态信息的命令行工具.他可以显示本地或远程虚拟机进程中的类装载.内存.垃圾收集.JIT编译等运行数据. jstat option ...
- 使用freemarker生成html、doc文件【原创】
语言:java 功能:使用freemarker生成html.doc 1.生成html public void updateuseFreemarker2html(String abdkId) { // ...
- FIRST集和FOLLOW集，FIRSTVT集和LASTVT集的求法
学习编译原理时, 这几个集合相信大家并不陌生:FIRST.FOLLOW.FIRSTVT.LASTVT. 其中First和Follow是一对,而Firstvt和Lastvt是一对. 它们的作用分别是: ...
- linux上的shutdown命令
定时关机:shutdown -r now 立刻重新开机 shutdown -h now 立刻关机 shutdown -k now 'Hey! Go away! now....' 发出警告讯息, 但没有 ...
- Kotlin基础知识
1. 改进点/基础 //安全判空 val length = text?.length; //类型转换 if (object is Car) { var car = object as Ca } //操 ...
- 64位wampserver开启curl扩展失败的问题
今天在运行程序时报错: Fatal error:Call to undefined function curl_init()... 在网上查了一下,是因为php_curl.dll扩展没有开启的缘故,于 ...
- mysql忘记数据库密码
1.停止mysql服务 2.以管理员身份开启命令行,进入mysql文件夹,mysqld --skip-grant-tables 3.另外以管理员身份开启一个命令行,直接输入mysql,就可以进入数据库 ...
- ElasticSearch java API-使用More like this实现基于内容的推荐
ElasticSearch java API-使用More like this实现基于内容的推荐 基于内容的推荐通常是给定一篇文档信息,然后给用户推荐与该文档相识的文档.Lucene的api中有实现查 ...
- 日常bug整理--xxtz
2017-12-12 建SQLite数据库表时,遇到外键关联报错:foreign key mismatch 解决:发现是个粗心问题,关联的外键没有作为主键,原因是关联的外键由INT改为varchar字 ...
- js对jsonArray的操作
上一篇写了关于java中Gson对jsonArray的排序处理,这里介绍js中对jsonArray处理, <!DOCTYPE html> <html> <head> ...