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高级程序设计>的风格,从浅入深, ...
随机推荐
- Hive 基本语法操练（三）：分区操作和桶操作
(一)分区操作 Hive 的分区通过在创建表时启动 PARTITION BY 实现,用来分区的维度并不是实际数据的某一列,具体分区的标志是由插入内容时给定的.当要查询某一分区的内容时可以采用 WHER ...
- notepad++上配置ruby执行环境
1.安装NppExec 插件 2.按快捷键F6,在弹出框中输入如下命令: npp_save cd "$(CURRENT_DIRECTORY)" jruby "$(FI ...
- Teradata 认证系列 - 1. TCPP这是个啥
一看历史,好几年没发帖...正好最近在自学teradata认证(学也不一定学的完,最后也不一定去考,仅仅安慰一下不想碌碌无为的内心) 网上一搜,百度上的中文相关资料简直为0.这个不奇怪,毕竟都没什么人 ...
- 谷歌插件 JSON-Handle
JSON-Handle http://jsonhandle.sinaapp.com/ 点击下载 插件下载后,在浏览器输入:chrome://extensions/ 将下载后的文件拖入 chrome浏览 ...
- .Net Core+mySqlSugar的一些稍复杂操作
介绍一些我尝试的mysqlSugar的数据库操作 修改密码 var status = db.Update<Users>(new { password = user.password }, ...
- substring、slice、substr的区别
首先定义一个变量便于下面测试:var str = "xx351223441"; substring: str.substring(form,to):从字符串里截取下标为form ...
- PHP中XML和数组互相转换的方法
转换代码如下 //数组转XML function arrayToXml($arr) { $xml = "<xml>"; foreach ($arr as $key=&g ...
- 【Java/Android性能优5】 Android ImageCache图片缓存，使用简单，支持预取，支持多种缓存算法，支持不同网络类型，扩展性强
本文转自:http://www.trinea.cn/android/android-imagecache/ 主要介绍一个支持图片自动预取.支持多种缓存算法.支持二级缓存.支持数据保存和恢复的图片缓存的 ...
- 最好的 6 个 HTML5 的多媒体播放器
是 HTML5 中新引入的标签,用来在 Web 网页中嵌入视频播放功能,无需 Flash 和其他嵌入式插件的支持,是浏览器内建的功能,不过 旨在一些高级浏览器中支持,例如 Firefox, Sa ...
- IOS类似9.png
图形用户界面中的图形有两种实现方式,一种是用代码画出来,比如Quartz 2D技术,狠一点有OpenGL ES,另一种则是使用图片. 代码画的方式比较耗费程序员脑力,CPU或GPU; 图片则耗费磁盘空 ...