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更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
随机推荐
- php的正则表达式完全手册
前言 正则表达式是烦琐的,但是强大的,学会之后的应用会让你除了提高效率外,会给你带来绝对的成就感.只要认真去阅读这些资料,加上应用的时候进行一定的参考,掌握正则表达式不是问题. 索引 1._引子 2. ...
- java环境变量及Eclipse自动编译问题
环境变量,是在操作系统中一个具有特定名字的对象,它包含了一个或者多个应用程序所将使用到的信息.例如Windows和DOS操作系统中的path环境变量,当要求系统运行一个程序而没有告诉它程序所在的完整路 ...
- vuejs模仿实现一个电影分享类网站
前几天朋友发了一个电影分享类网站:http://dy.bingthink.top/ 感觉界面还挺好看的,所以打算用vuejs模仿写一个. 从后台转前端,要学习的东西挺多的,仅以此记录我的学习历程,闲的 ...
- java synchronized关键字的底层实现
每个对象都有一个锁(Monitor,监视器锁),class对象也有锁,如果synchronized关键字修饰同步代码块,通过反编译可以看到,其实是有个monitorenter和monitorexit指 ...
- Hive的静态分区和动态分区
作者:Syn良子 出处:http://www.cnblogs.com/cssdongl/p/6831884.html 转载请注明出处 虽然之前已经用过很多次hive的分区表,但是还是找时间快速回顾总结 ...
- 由浅入深之Tensorflow(4)----Saver&restore
x = tf.placeholder(tf.float32) y = tf.placeholder(tf.float32) w = tf.Variable(tf.zeros([1, 1], dtype ...
- I.MX6中PC连接开发板问题
修改板端的文件 添加登录密码: passwd vi /etc/network/interrfaces 在auto eth0下增加auto eth1 如果采用固定ip方式可以在后面增加一段固定ip设置 ...
- Lucene 的 Scoring 评分机制
转自: http://www.oschina.net/question/5189_7707 Lucene 评分体系/机制(lucene scoring)是 Lucene 出名的一核心部分.它对用户来 ...
- 调试bug的几种方法
1.php中的dump,echo,exit 2.浏览器的f12 3.安装xdebug扩展(debugger调试器,profiler探查器,trace代码跟踪) profile日志能记录函数的执行耗时和 ...
- MySQL索引最左原则
通过实例理解单列索引.多列索引以及最左前缀原则 实例:现在我们想查出满足以下条件的用户id: 因为我们不想扫描整表,故考虑用索引. 单列索引: ALTER TABLE people ADD INDEX ...