Vue 变异方法unshift&pop&shift
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title id="title">{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<ul>
<li v-for="v in list">
{{v.content}}
</li>
</ul>
<textarea v-model="content" cols="30" rows="10"></textarea> <button v-on:click="push('pre')">发表到前面</button>
<button v-on:click="push('end')">发表到后面</button> <button v-on:click="del('first')">删除第一条</button>
<button v-on:click="del('last')">删除最后一条</button>
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue 变异方法unshift&pop&shift'
}
});
var app = vue({
el:'#ask',
data:{
content:'',
list:[
{'content':'hello'},
{'content':'简单记录'}
]
},
methods:{
push(type){
var content_push = {'content':this.content};
switch (type) {
case 'pre':
this.list.unshift(content_push);
break;
case "end":
this.list.push(content_push);
break;
}
this.content='';
},
del(type){
switch (type) {
case 'first':
this.list.shift();
break;
case "last":
this.list.pop();
break;
}
}
}
}); </script>
</body>
</html>
Vue 变异方法unshift&pop&shift的更多相关文章
- 021——VUE中变异方法 push/unshift pop/shift
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法filter和正则RegExp对评论进行搜索
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法sort&reverse对评论进行排序
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法splice删除评论功能
<!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() pop() shift() unshift() splice() sort() reverse() contact()浅拷贝 slice()原数组拷贝
push() pop() shift() unshift() splice() sort() reverse() 参考资料:https://wangdoc.com/javascript/stdlib/ ...
- js数组方法push pop shift unshift的返回值
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. pop() 方法用于删除并返回数组的最后一个元素. unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度. s ...
- vue变异方法
push() 往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元素,成功返回删除元素的值 shift() 删除数组的第一个元素,成功返回删除元素的值u ...
- Vue push() pop() shift() unshift() splice() sort() reverse() ...
Vue 变异方法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. pop() 方法用于删除并返回数组的最后一个元素. shift() 方法用于把数组的第一个元素从其中删除,并返回 ...
随机推荐
- LG1131 「ZJOI2007」时态同步 树形DP
问题描述 LG1131 题解 正难则反,把从一个点出发到叶子结点看做从叶子结点走到那个点. DP方程很显然. \(\mathrm{Code}\) #include<bits/stdc++.h&g ...
- 模拟ssh远程执行命令
目录 一.服务端 二.客户端 一.服务端 from socket import * import subprocess server = socket(AF_INET, SOCK_STREAM) se ...
- React中useEffect使用
2019-08-24 07:00:00 文摘资讯 阅读数 1364 收藏 博文的原始地址 之前我们已经掌握了useState的使用,在 class 中,我们通过在构造函数中设置 this.s ...
- Java字符串面试问答
字符串是使用最广泛的Java的类之一.在这里,我列出了一些重要的Java的字符串面试问答. 这将有助于您全面了解String并解决面试中与String有关的任何问题. Java基础面试问题 Java中 ...
- 【文本处理命令】之sed命令详解
sed行处理命令详解 一.简介 sed命令是一种在线编辑器.一个面向字符流的非交互式编辑器,也就是说sed不允许用户与它进行交互操作.sed是按行来处理文本内容的,它一次处理一行内容.处理时,把当前处 ...
- 安全NA第一天笔记：Firewall基本理论
防火墙的三种类型:<1>包过滤(packet filtering):也就是我们常用的访问控制列表(ACL)1.ACL类型:标准,扩展,命名,自反2.ACL其他特性:(1)重新排列序列号: ...
- 黄聪：table自适应宽度和高度
自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自 ...
- 【趣学程序】Linux上安装Tengine（Nginx）
linux 安装tengine tengine是什么 tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳 ...
- JVM内存分配策略，及垃圾回收算法
本人免费整理了Java高级资料,一共30G,需要自己领取;传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 说起垃圾收集(Garbage Co ...
- Set a One-to-Many Relationship设置一对多关系 （XPO）
In this lesson, you will learn how to set a one-to-many relationship between business objects. The C ...