Vue 变异方法splice删除评论功能
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title id="title">{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<ul>
<li v-for="(v,k) in list">
{{v.content}}<button v-on:click="remove(k)">删除</button>
</li>
</ul>
<textarea v-model="content" cols="30" rows="10"></textarea> <button v-on:click="push('pre')">发表到前面</button>
<button v-on:click="push('end')">发表到后面</button> <button v-on:click="del('first')">删除第一条</button>
<button v-on:click="del('last')">删除最后一条</button>
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue 变异方法splice删除评论功能'
}
});
var app = vue({
el:'#ask',
data:{
content:'',
list:[
{'content':'ask.mykeji.net'},
{'content':'简单记录'}
]
},
methods:{
remove(k){
this.list.splice(k,1)
},
push(type){
var content_push = {'content':this.content};
switch (type) {
case 'pre':
this.list.unshift(content_push);
break;
case "end":
this.list.push(content_push);
break;
}
this.content='';
},
del(type){
switch (type) {
case 'first':
this.list.shift();
break;
case "last":
this.list.pop();
break;
}
}
}
}); </script>
</body>
</html>
Vue 变异方法splice删除评论功能的更多相关文章
- Vue 变异方法filter和正则RegExp对评论进行搜索
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法sort&reverse对评论进行排序
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法unshift&pop&shift
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法Push的留言板实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习（5）-评论功能（利用父组件的方法）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue变异方法
push() 往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元素,成功返回删除元素的值 shift() 删除数组的第一个元素,成功返回删除元素的值u ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
- Vue列表渲染-变异方法
Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组 所以它们也将会触发视图更新.这些方法如下: push() pop() shi ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
随机推荐
- CSP-S需备模板大全
CSP-S需备模板大全 谨以此文祝愿自己\(CSP-S\,\,2019\,\,\color{red}{RP++!!}\) 算法 二分 while(l<r) { int mid=(l+r+1)&g ...
- CometOJ10C 鱼跃龙门
题目链接 problem 实际上就是对于给定的\(n\)求一个最小的\(x\)满足\(\frac{x(x+1)}{2}=kn(k\in N^*)\). solution 对上面的式子稍微变形可得\(x ...
- word文档操作-doc转docx、合并多个docx
前言: 临时来了一条新的需求:多个doc文档进行合并. 在网上苦苦搜罗了很久才找到可用的文件(原文出处到不到了 所以暂时不能加链接地址了),现在记录下留给有需要的人. 一:doc转docx 所需jar ...
- springboot-热部署Jrebel
1. 场景描述 介绍下idea+springboot下的热部署插件-Jrebel,贼好用,以前用过好多种,但是总出现不稳定或者会莫名其妙的没有部署新代码. 2.解决方案 springboot自带的de ...
- 获取Excel工作薄中Sheet页(工作表)名集合
#region 获取Excel工作薄中Sheet页(工作表)名集合 02./// <summary> 03./// 获取Excel工作薄中Sheet页(工作表)名集合 04./// < ...
- wpf 当DataGrid列模版是ComboBox时，显示信息
实际工作中,有时DataGrid控件某一列显示数据是从Enum集合里面选择出来的,那这时候设置列模版为ComboBox就能满足需求.而关于显示的实际内容,直接是Enum的string()返回值可能 ...
- SmtpClient发送邮件时附件名称乱码
在用户环境发现一个现象,使用System.Net.Mail.SmtpClient发送邮件,当附件名包含中文且长度较长时,最终的邮件里附件名会乱掉,写个简单的测试程序: var mail = new M ...
- python基础(25):面向对象三大特性二(多态、封装)
1. 多态 1.1 什么是多态 多态指的是一类事物有多种形态. 动物有多种形态:人,狗,猪. import abc class Animal(metaclass=abc.ABCMeta): #同一类事 ...
- Linux常用命令（2）
3.帮助命令 A,帮助命令:man B,其他帮助命令 3.1,格式:man [命令名] 查看命令拥有哪个级别的帮助: ...
- HTTP协议中的chunked编码解析
\r\n\r\n"了. chunked编码很简单,是不是? 不过,在协议还原的实现过程中,如何高效高性能地对chunked进行解码,是一件值得挑战的事哦.毕竟,HTTP的流量占比不小的. 长 ...