021——VUE中变异方法 push/unshift pop/shift
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变异方法：push/unshift pop/shift</title>
<script src="vue.js"></script>
</head>
<body>
<div id="hdcms">
<li v-for="v in comments">
{{v.content}}
</li>
<textarea v-model="current_content" cols="30" rows="10"></textarea><br>
<button v-on:click="push('end')">发表到最后</button>
<button v-on:click="push('prev')">发表到前面</button>
<br>
<button v-on:click="del('pop')">删除最后一条</button>
<button v-on:click="del('shift')">删除第一条</button>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
//当前用户输入内容：
current_content: "",
comments: [
{content: "后盾人"},
{content: "老师"}
]
},
methods: {
push(type) {
var content = {content: this.current_content};
switch (type) {
case 'end':
this.comments.push(content);
break;
case 'prev':
this.comments.unshift(content);
break;
}
this.current_content = "";
},
del(type) {
switch (type) {
case 'pop':
this.comments.pop();
break;
case 'shift':
this.comments.shift();
break;
}
}
}
});
</script> </body>
</html>
021——VUE中变异方法 push/unshift pop/shift的更多相关文章
- 020——VUE中变异方法push的留言版实例讲解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 21.VUE学习之-操作data里的数组变异方法push&unshit&pop&shift的实例应用讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法unshift&pop&shift
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法Push的留言板实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 数组增、删方法（push()-unshift()-pop()和shift()）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
- <h2>js数组操作大全（pop,push,unshift,splice,shift方法）</h2>
---恢复内容开始--- shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a ...
- 022——VUE中remove()方法的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中this.$router.push（参数） 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...
随机推荐
- js的同步异步
由于js没有多线程,所以处理多任务的时候,可以用异步回调来解决.js中setTimeout.setInterval.ajax(jq中可以选择同步或异步)均会开启异步.遇到异步模块,会将其推入值任务队列 ...
- Java学习第二周学习笔记
20145307<Java程序设计>第二周学习总结 教材学习内容总结 Java语言中的很多基本语法都和C语言类似,以下Java中的基本语法 标识符 标识符是程序中自定义的一些名称. 由26 ...
- 20145312 实验二《 Java面向对象程序设计》
20145312 实验二< Java面向对象程序设计> 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解 ...
- 20145324 Java实验四
在IDEA上操作 由于不会创建安卓模拟器失败 选择老师给的插件 成功 实验总结 开始开发安卓,感觉更难了,这次实验完全是看运气拼电脑的实验! 步骤 耗时 百分比 需求分析 10m 17% 设计 20m ...
- CSS 属性的推荐书写顺序
- struts2中各个jar包作用 （转）
Struts2.3.4 所需的Jar包及介绍 Jar包的分类 jar包名称 jar包版本 jar包 文件名 jar包 的作用 jar包内包含的主要包路径及主要类 依赖的自有jar包名称 依赖的第三方j ...
- idea 快捷键及使用技巧
IDEA中经常使用的快捷键: Ctrl+Shift + Enter 语句完成 可以快速在行末添加分号,或添加大括号{} Ctrl+Shift + F 全文查找 需要把搜狗打字的快捷键关掉 Ctrl+A ...
- WinCE数据通讯之Web Service篇
准备写个WinCE平台与数据库服务器数据通讯交互方面的专题文章,今天先整理个Web Service通讯方式. 公司目前的硬件产品平台是WinCE5.0,数据通讯是连接服务器与终端的桥梁,关系着终端的数 ...
- 测试Python类成员的单下划线，双下划线，两头下划线的区别
首先原谅一个菜鸟叫他“两头下划线”.记得在windows编程中,很多宏定义使用下划线+大写,给人逼格很高的错觉.对于Python下划线的认识,大概是从__dict__这个属性开始的,看__dict__ ...
- Javascript 十移跳转页面
<srcipty> var t = 10; function openwin(){ t -= 1; if( t==0){ location.href='prototype.html'; } ...