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更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
随机推荐
- log4j的配置和使用
日志记录 在应用程序中添加日志记录总的来说基于三个目的: 监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析工作: 跟踪代码运行时轨迹,作为日后审计的依据:担当集成开发环境中的调试器 ...
- Bar Mitzvah Attack分析
结合RC4算法实现,简单分析一下Bar Mitzvah Attack攻击的原理,并以WEP破解过程来举例说明通用的破解方式.(个人觉得RC4早已经过时,要想避免该攻击,应该采用更好的加密算法,如:cc ...
- TOSCA自动化测试工具安装
1.下载链接 https://www.tricentis.com/software-testing-tools/ 2.免费试用14天, 弹出的页面输入邮箱地址--> 输入一堆信息-->点击 ...
- java容器的数据结构-ArrayList,LinkList,HashMap
ArrayList: 初始容量为10,底层实现是一个数组,Object[] elementData 自动扩容机制,当添加一个元素时,数组长度超过了elementData.leng,则会按照1.5倍进行 ...
- Safari中的input、textarea无法输入的问题
原因是这两种表单元素上应用了user-select:none的css属性.一般没人刻意这么做,可能是这样的情况: * { user-select: none; } 在css中排除掉这两种元素就好了: ...
- C++之条形码，windows下zint库的编译及应用（二）
zint库是一个开源的第三方库,提供了生成条形码.二维码等功能.本文主要介绍zint库的生成及简单应用. 0windows下zint库的编译及应用(一) 工具/原料 vs2012 生成条形 ...
- win7_32下编译FFmpeg
运行环境: VC2010软件: [附:本文所用软件安装包:http://download.csdn.NET/detail/sinat_36666600/9705438 ...
- Django学习笔记之URL标签的使用
期初用django 开发应用的时候,完全是在urls.py 中硬编码配置地址,在views.py中HttpResponseRedirect()也是硬编码转向地址,当然在template 中也是一样了, ...
- 手写一款符合Promise/A+规范的Promise
手写一款符合Promise/A+规范的Promise 长篇预警!有点长,可以选择性观看.如果对Promise源码不是很清楚,还是推荐从头看,相信你认真从头看到尾,并且去实际操作了,肯定会有收获的.主要 ...
- 你可能不熟悉的JS总结
暂时性死区 只要块级作用域存在let命令,它所声明的变量就"绑定"这个区域,不再受外部的影响.这么说可能有些抽象,举个例子: var temp = 123; if(true) { ...