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更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
随机推荐
- PKU 3318 Matrix Multiplication(随机化算法||状态压缩)
题目大意:原题链接 给定三个n*n的矩阵A,B,C,验证A*B=C是否成立. 所有解法中因为只测试一组数据,因此没有使用memset清零 Hint中给的傻乎乎的TLE版本: #include<c ...
- PHP Web木马扫描器
<?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控 ...
- 开源一款android 偷拍 app【静拍】豌豆荚、flyme商店已经上线
首先先花3秒时间,预览下下app的大概是做啥的,解决啥痛点的:) app: 本地下载地址 需求点: 1:音量键可以拍照 2:没有快门声.闪光灯 3:锁屏下.或者是在其他程序界面都可以拍照 思路: 1: ...
- nodejs做中间层，向后端取数据
var http=require('http'): http.get('http://baidu/dksapi/weiboLive/GetSquareLive?pagecount=1&pag ...
- linux下不同服务器间数据传输(wget,scp)
一.wget是Linux下最常用的http/ftp文件下载工具1.wget断点续传,只需要加上-c参数即可,例如:代码:wget-chttp://www.abc.com/abc.zip-Oabc.zi ...
- get请求参数为中文，参数到后台出现乱码(注：乱码情况千奇百怪，这里贴我遇到的情况)
前言 get请求的接口从页面到controller类出现了乱码. 解决 参数乱码: String param = "..."; 使用new String(param.getByte ...
- Docker-初始docker
一.什么是Docker Docker 在容器的基础上,进行了进一步的封装,从文件系统.网络互联到进程隔离等等,极大的简化了容器的创建和维护.使得 Docker 技术比虚拟机技术更为轻便.快捷. 下面的 ...
- 20145103《JAVA程序设计》第十周学习总结
网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴.在发送和接收数据时,大部分的程序设 ...
- IDEA 安装mybatis 插件 可以通过mapper定位到xml
在使用IDEA的时候 ,通过mapper类定位到 xml文件是让人很头疼的问题! 无意中发现了这个插件!可以通过类方法直接定位到xml中!比较强大!哈哈! 这玩意好像是付费的! 不过不破解也能用! 哈 ...
- Java 面试题代码类收集
long temp=(int)3.9; System.out.println(temp); temp%=2; System.out.println(temp); 3 1 Java里面类的方法名可以与类 ...