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高级程序设计>的风格,从浅入深, ...
随机推荐
- Murano PTL&Core
PTL: Serg Melikyan Core: Ekaterina Chernova efedorova@mirantis.com Kirill Zaitsev kzaitsev@mirantis. ...
- c语言字符串操作总结(转)
本文转自:http://www.jb51.net/article/37410.htm 1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 s ...
- Zookeeper问题汇总
1. 遗留问题 a). zookeeper集群如何保证请求的均匀分布? 2. ZK概念澄清 2.1 ZK节点类型 CreateMode.PERSISTENT //持久节点,该节点客户端断开后不会删除 ...
- SVN的搭建（权限配置篇）
如要转载,请注明出处! 两个问题: 如何维护多个目录或者仓库 目录权限如何设置 ============================================================ ...
- SpringBoot | 第九章：Mybatis-plus的集成和使用
前言 本章节开始介绍数据访问方面的相关知识点.对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的.目前,绝大部分公司都选择MyBatis框架作为底层数据库持久化框 ...
- mybatis + log4j2 问题 java.lang.NoClassDefFoundError: org/apache/logging/log4j/spi/AbstractLoggerWrapper
root cause java.lang.NoClassDefFoundError: org/apache/logging/log4j/spi/AbstractLoggerWrapper 网上资料比较 ...
- AD Framework 发布（一）
1. EF Code First 发布时,需要配置数据库账号,账号需要存在服务器角色中具备 diskadmin,public,sysadmin 权限. 2. 数据库不存在时,会通过数 ...
- Sublime Text插件列表
本文由 伯乐在线 - 艾凌风 翻译,黄利民 校稿.英文出处:ipestov.com.欢迎加入翻译组. 本文收录了作者辛苦收集的Sublime Text最佳插件,很全. 最佳的Sublime Text ...
- 配置ftp服务器
计算机管理->用户->添加用户 iis网站右键->添加ftp站点(没有此选项确认已安装及开启了ftp服务)->进行相关设置即可
- 《译》准备做一些 AR/增强现实的 翻译
中文这方面资料实在少之又少. 准备做一些这方面翻译,关注于Vuforia, Unity3d, Hololens等方面. 如有问题.建议,随时联系.Fell free ton contact me.