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"& ...
随机推荐
- 安装picard
1.下载 wget https://github.com/broadinstitute/picard/releases/download/2.21.6/picard.jar alias picard= ...
- <Topological Sort> ( 高频, hard) 269
. Alien Dictionary 这些就是有向图的边,对于有向图中的每个结点,计算其入度,然后从入度为0的结点开始 BFS 遍历这个有向图,然后将遍历路径保存下来返回即可.下面来看具体的做法: 根 ...
- 微服务、SpringCloud、k8s、Istio杂谈
一.微服务与SOA “微服务”是一个名词,没有这个名词之前也有“微服务”,一个朗朗上口的名词能让大家产生一个认知共识,这对推动一个事务的发展挺重要的,不然你叫微服务他叫小服务的大家很难集中到一个点上. ...
- npm ERR! code ENOLOCAL
Microsoft Windows [版本 ] 版权所有 (c) Microsoft Corporation.保留所有权利. G:\vue>cnpm i vue-router -S 'cnpm' ...
- Java连载48-final关键字
一.final关键字 1.注意点: (1)final是一个关键字,表示最终的,不可变的. (2)final修饰的类无法被继承 (3)final修饰的方法无法被覆盖 (4)final修饰的变量一旦被赋值 ...
- LeetCode 350: 两个数组的交集 II Intersection of Two Arrays II
题目: 给定两个数组,编写一个函数来计算它们的交集. Given two arrays, write a function to compute their intersection. 示例 1: 输 ...
- 2019-9-23-win10-uwp-睡眠唤醒
原文:2019-9-23-win10-uwp-睡眠唤醒 title author date CreateTime categories win10 uwp 睡眠唤醒 lindexi 2019-9-23 ...
- windows server 2008 r2 安装 vs2017 无法进入安装界面问题解决方法
在 windows server 2008 r2 版本操作系统上安装 vs2017 经常出现下载进度条结束后没有任何反应问题,一般是因为安装程序兼容性造成的,解决方案如下: 将 C:\Program ...
- 树莓派4B到货开箱体验
树莓派4B到货开箱体验 实不相瞒,喜欢这块板已经很久了,但是国内4GB内存的版本始终没货,.....等等等,终于到货了,迅雷不及眼耳之势赶紧下单...购买点亮开发板所需要的物件 顺便看到一个好看的外壳 ...
- XAF中多对多关系 （XPO）
In this lesson, you will learn how to set relationships between business objects. For this purpose, ...