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更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
随机推荐
- Restful风格API
一:协议 API与用户的通信协议,总是使用HTTPS协议. 二:域名 应该尽量将API部署在专用域名之下. https://api.example.com 如果确定API很简单,不会有进一步扩展,可以 ...
- npm使用淘宝镜像
淘宝 npm 地址: http://npm.taobao.org/ 如何使用 有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法.以淘宝npm镜像举例: 1.临时使用 ...
- 开发者应该了解的API技术清单
近几年,API经济纷纷崛起,无论是国外还是国内,众多厂商积极开放API.开发者很多时候是要借助这些API,才能轻松构建出一款应用,极大地提高开发效率和开发质量.文中整理了一份API服务清单,内容涵盖: ...
- Android开发环境配置到第一个程序所遇到的问题
1.安装顺序 先jdk,最后是1.7或1.8吧,配置环境变量:然后是sdk,配置环境变量:sdk安装之后即可以通过SDK Manager进行其他包的安装. 2.sdk及其他包的安装,以一张图表示,对于 ...
- linux下创建用户，给用户设置密码，给用户授权
1.linux下的用户是属于组的,所以需要创建一个组,划分给用户.创建命令: 在root下执行 groupadd ver 创建一个组ver 2.创建用户 useradd ...
- lastIndexOf is not a function
最近在开发的时候遇到了这个问题lastIndexOf is not a function,细心调试发现我传递进去的参数不是字符串类型,而且object类型,导致出现这种错误.把参数修改成字符串传递进去 ...
- JS答辩习题
php高中班javascript答辩题目 1 什么是javascript? 答:Javascript是一种专门设计用来增强网页交互性的脚本语言,它也是一种解释型语言. 2 Javascript与C语 ...
- java 与C# 时间格式 交互
方法一 C#端代码 IsoDateTimeConverter convert = new IsoDateTimeConverter(); string ret = JsonConvert.Serial ...
- 20145211《网络渗透》MS12-004漏洞渗透
20145211<网络渗透>MS12-004漏洞渗透 一 实验原理 初步掌握平台matesploit的使用 有了初步完成渗透操作的思路 在这里我选择对的不是老师推荐的MS11_050,而是 ...
- vim 中查询和转换编码
vim中查询修改文件编码格式 set fileencoding 查看现在文本的编码 :set fenc=编码 转换当前文本的编码为指定的编码 :set enc=编码 以指定的编码显示文本,但不保存到文 ...