022——VUE中remove()方法的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的变异方法：splice()方法</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
<li v-for="(v,k) in comments">
{{v.content}}
<button v-on:click="remove(k)">删除</button>
</li>
<textarea rows="10" cols="20" v-model="current"></textarea><br/>
<button v-on:click="push('first')">在数据前面增加</button>
<button v-on:click="push('last')">在数据后面增加</button>
<br>
<button v-on:click="del('first')">删除第一个数据</button>
<button v-on:click="del('last')">删除最后一个数据</button>
</div>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
current:"",
comments:[
{content:'PHP'},
{content:'JAVA'}
]
},
methods:{
//增加数据的方法：
push(type){
var content={content:this.current};
switch (type){
case 'first':
this.comments.unshift(content);
break;
case 'last':
this.comments.push(content);
break;
}
this.current="";
},
//删除数据的方法：
del(type){
switch (type){
case 'first':
this.comments.shift();
break;
case 'last':
this.comments.pop();
break;
}
},
//点击删除，删除对应的数据信息：
remove(k){
this.comments.splice(k,1);
}
}
});
</script>
</body>
</html>
022——VUE中remove()方法的使用：的更多相关文章
- 使用List中remove方法时需要注意的问题
String str1 = new String("1"); String str2 = new String("2"); String str3 = new ...
- 从 Vue 中 parseHTML 方法来看前端 html 词法分析
先前我们在 从 Vue parseHTML 所用正则来学习常用正则语法 这篇文章中分析了 parseHTML 方法用到的正则表达式,在这个基础上我们可以继续分析 parseHTML 方法. 先来看该方 ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
- 021——VUE中变异方法 push/unshift pop/shift
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 020——VUE中变异方法push的留言版实例讲解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Ace 在Vue中使用方法
var Vue = require('vue/dist/vue.common.js'); document.querySelector('body').append(document.createEl ...
- vue中makeMap方法的使用 (定义注册一些值 后期方便使用)
function makeMap ( str, expectsLowerCase ) { var map = Object.create(null); var list = str.split(',' ...
- Vue中的methods、watch、computed
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
随机推荐
- hbase(二)
一.HBase简介 1.1简介 hbase是bigtable的开源山寨版本.是建立的hdfs之上,提供高可靠性.高性能.列存储.可伸缩.实时读写的数据库系统.它介于nosql和RDBMS之间,仅能通过 ...
- iPhone X 游戏闪退：NSUnknownKeyException
目前很多游戏在iPhone X手机 wifi情况下,启动时候闪退,在4G网络时候不闪退. 闪退的log: #0 Thread NSUnknownKeyException [<UIStatusBa ...
- tomcat源码调试
三.tomcat目录结构 tomcat的下载安装有很多教程,不再赘述. 现在的tomcat已经到9了,当tomcat下载安装完成后,其目录大致如下: 除了上面的文件夹,还有四个文件: ...
- MR案例：路径过滤PathFilter
问题描述:现有一批cookie日志,按照日期进行存放,如目录 “dir/2015-08-08” 下存放2015-08-08这一天的所有cookie.而目录 “/2015-08-08/” 下又根据数据文 ...
- vue.js的一些小语法v-bind,v-if,v-show,v-else
知识点: v-bind 动态绑定标签属性 v-bind 可简写为 : 使用v-bind 绑定class和内联样式 使用v-if,v-show,v-else进行条件渲染 <template> ...
- LeetCode——3Sum Closest
Question Given an array S of n integers, find three integers in S such that the sum is closest to a ...
- 【论文解析】MTCNN论文要点翻译
目录 0.论文连接 1.前言 2.论文Abstract翻译 3.论文的主要贡献 4.4 训练 5 模型性能分析 5.1 关于在线挖掘困难样本的性能 5.2 将人脸检测与对齐联合的性能 5.3 人脸检测 ...
- MATLAB 图形图像处理
theme: MATLAB author: pprp date: 2018/2/2 --- MATLAB 图形图像处理 二维绘图命令 plot 线性空间 plot(t,[x1,x2,x3]) : 在同 ...
- UVa 11354 邦德（最小瓶颈路+LCA）
https://vjudge.net/problem/UVA-11354 题意: 有n个城市m条道路,每条道路有一个危险系数.先在有若干个询问,要求找到一条从s到t的路,使得途径所有边的最大危险系数最 ...
- java高级特性（3）--方法可变参数
1.特征:... 2.方法可变参数,必须是方法参数列表的最后一位. 3.一个方法只能有一个方法可变参数. 4.方法可变参数本质是一个数组. 5.调用时按照方法可变参数赋值,多余的实参被封装成一个数组, ...