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"& ...
随机推荐
- flask--数据库迁移之连环踩坑记
flask数据库迁移命令: python manage.py db init python manage.py db migrate python manage.py db upgrade 1.报错: ...
- python面试题及答案 2019
利用切片操作,实现一个trim()函数,去除字符串首尾的空格,注意不要调用str的strip()方法. 正解1: def trim(s): while s[:1] == ' ': s = s[1:] ...
- 【Java线程与内存分析工具】VisualVM与MAT简明教程
目录 前言 VisualVM 安装与配置 本地使用 远程监控 MAT 使用场景 安装与配置 获得堆转储文件 分析堆转储文件 窥探对象内存值 堆转储文件对比分析 总结 前言 本文将简要介绍Java线程与 ...
- 手写SpringMVC实现过程
1. Spring Boot,Spring MVC的底层实现都是Servlet的调用. 2. Servlet的生命周期里面首先是类的初始化,然后是类的方法的调用,再次是类的销毁. 3. 创建一个spr ...
- 安装Keepalived namespaces.c:187: error: ‘SYS_setns’ undeclared (first use in this function)
错误信息 namespaces.c: In function ‘setns’: namespaces.c:: error: ‘SYS_setns’ undeclared (first use in t ...
- Java开发桌面程序学习（13）——Javafx多线程 下载功能
普通使用 Task<Void> task = new Task<Void>() { @Override protected void succeeded() { super.s ...
- go-控制语句
if else else不能换行 if后最好不加小括号,当然可以加,但建议不加 求平方根 引入math包 调用math.Sqrt(num)函数 switch分支 不用加break来跳出,每一个case ...
- linux tmux用法
1. 安装工具 Centos : yum install tmux 2. 基本操作 新建会话:tmux new -s session-name 查看会话:tmux ls 进入会话:tmux a -t ...
- FCC---Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限，让小球一直跳动
The previous challenges covered how to use some of the animation properties and the @keyframes rule. ...
- 论文学习-混沌系统以及机器学习模型-11-29-wlg
混沌系统以及机器学习模型 概述: 必要条件下: negative values of the sub-Lyapunov exponents. 通过rc方法, 可以在参数不匹配的情况下,实现输入信号,混 ...