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高级程序设计>的风格,从浅入深, ...
随机推荐
- Linux Bash 命令行快捷键小结
编辑命令 光标移动 剪切.删除 Ctrl ...
- Zipkin — 微服务链路跟踪.
一.Zipkin 介绍 Zipkin 是什么? Zipkin的官方介绍:https://zipkin.apache.org/ Zipkin是一款开源的分布式实时数据追踪系统(Distributed ...
- poi操作word文档文件操作
import org.apache.poi.POITextExtractor; import org.apache.poi.hwpf.extractor.WordExtractor; //得到.doc ...
- 扔掉360：Linux下无线网卡作WiFi路由器(转薄荷开源网)
这个话题很多人感兴趣,毕竟现在是无线互联时代.手机一族到外面去,首先关心的就是有没有 WiFi.Windows 7 用户可以安装 360 的软件,把笔记本电脑配置成路由器,供手机或其他电脑上网. 在 ...
- java 基础 02 数据类型、运算符、分支结构
内容: (1)数据类型 (2)运算符 (3)分支结构 1.数据类型 java语言中的基本数据类型:byte.short.int.long.float.double.boolean.char. 1.1布 ...
- A promise tomorrow is worth a lot less than trying today.
A promise tomorrow is worth a lot less than trying today.明日的承诺远不及今日的行动.
- cron 任务执行表达式
1.来源 开始我还不知道cron到底来源于哪里,不求甚解的我也没做过多了解,现在突然用到所以写一下. cron计划任务 其实只是linux 一个执行计划的一个工具或者执行程序. 在Linux系统中, ...
- mui蒙版使用例子
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...
- Apache Solr-6.0.1 (OpenLogic CentOS 7.2)
Apache Solr-6.0.1 (OpenLogic CentOS 7.2) 平台: CentOS 类型: 虚拟机镜像 软件包: java1.8 solr6.0.1 application ser ...
- 在eclipse上搭建springBoot
1,具体步骤网上有,需要注意的是,如果是maven项目,需要先下载maven,配置环境变量,再在eclipse-windows -- preference -- maven,选择usersetting ...