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高级程序设计>的风格,从浅入深, ...
随机推荐
- IIS下FTP服务器的PASV端口范围修改方法
应该有不少使用IIS自带的FTP服务器,IIS的FTP里的PASV模式下默认端口范围1024 - 65535,连接时会从中随机选择到响应.这样的超大范围就给服务器安全带来的隐患. 虽然可以通过一些方法 ...
- GCC的内存边界对齐
GCC有三种影响内存对齐的开关: 首先是命令行参数 –fpack_struct=n (n只可以是1,2,4,8等2的幂,而且要小于平台默认的对齐字节数,否则不会生效) ...
- mysql-作业
一.表关系 请创建如下表,并创建相关约束 班级表:class 学生表:student cid caption grade_id sid sn ...
- mysql数据库初步了解
一丶数据库服务器丶数据管理系统丶数据库丶表与记录的关系 记录:1 xxxx 3245646546(多个字段的信息组成一条记录,即文件中的一行内容) 表: Student.school,class_li ...
- 未整理js
函数+对象=方法 方法是动作 有参数的函数=实例 使用new关键字和函数来创建一个实例 var p =new Point(1,1)//平面几何的点 表示遍历的语句样子: for(var i =0; i ...
- Spring Boot : Swagger 2
每次修改完代码需要找原本的API时楼主的内心是痛苦的,因为一般情况下都找不到,需要重新写一份.如果使用Swagger的话,只要加几个注解就可以实时生成最新的在线API文档,而且不仅仅是文档,同时支持A ...
- python3基础07（进程操作及执行系统级命令等）
#subprocess 创建子进程 连接输入 输出 管道错误,及获取他们的状态,可执行操作系统级的命令# subprocess.run(args, *, stdin=None, input=None, ...
- 签证-L1/L2
http://blog.sina.com.cn/s/blog_7664b7f70102uweb.html 14年4月我接到公司通知,要从MICROSTRATEGY中国研发中心内部transfer到美国 ...
- (转载)office 2003 gaozhi.msi 缺失提示问题修复
某些GHOST版win7,自带office 2003,每次启动word,它都会提示"稿纸没安装"云云,找不到那个文件.可是我搜遍了硬盘,确实没有那个文件.每次都要点取消,这个提示才 ...
- V2EX 神回复 #1
"抠图"用英文怎么说 今天突然被"抠图"这个单词给难住了," image segmentation "," image cut & ...