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() 方法用于把数组的第一个元素从其中删除,并返回 ...
随机推荐
- 数据可视化-matplotlib包
pyplot官网教程https://matplotlib.org/users/pyplot_tutorial.html #导入matplotlib的pyplot模块 import matplotlib ...
- Please make sure you have the correct access rights and the repository exists.
参考:https://blog.csdn.net/jingtingfengguo/article/details/51892864,感谢老哥. 从码云克隆项目到新的服务器上,报错: Please ma ...
- 最近公共祖先（LCA）基础模板(倍增法)
之前在澡堂学过这么个东西,听课时理解非常透彻,然后做题时是这种状态: 因为并没有切板子题,最近切掉以后看同桌,他默默地说了一句话: 我是什么时候A的来着... 我当时就心态爆炸... 现在来进行简单整 ...
- SVO稀疏图像对齐代码分析
SVO使用稀疏直接法计算两帧之间的初始相机位姿,即使用两帧之间稀疏的4*4 patch的光度误差为损失函数,使用G-N优化算法获得两帧之间的位姿变换,由于没有特征匹配过程效率较高.相比自己实现的稀疏直 ...
- 一文学会 TypeScript 的 82% 常用知识点（上）
前端专栏 2019-11-22 19:17:55 对于前端从业者来说,TypeScript(以下简称 TS)已经不算是新技术. Vue3 的源码基于 TS 编写, Angular 项目默认支持 TS ...
- Android Monkey的用法（一）
Monkey 简介 ü Monkey 是一个命令行工具,可以运行在 Android 模拟器里或真实设备中.它可以向系统发送伪随机(pseudo-random)的用户事件流(如按键输入.触摸屏输入 ...
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- 在 .NET Core 下使用 SixLabors.ImageSharp 操作图片文件（放大、缩小、裁剪、加水印等等）的几个小示例
1. 基础 1.1 将图片的宽度和高度缩小一半 直接贴代码了: <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup ...
- 13. 罗马数字转整数(C#)
看到这道题,存在键值对,所以先建个泛型字典,把键值填进去. 由于这道题存在两个字符表示一个数字的情况,所以在for循环的时候判断一下,看看当前字符串中循环到的字符是否和下一个字符能够组成存在在字典里的 ...
- LinuxShell脚本——循环结构
LinuxShell脚本——循环结构 摘要:本文主要学习了Shell脚本中的循环结构. while循环 基本语法 while循环是最简单的一种循环,如果条件满足则执行循环里的语句,如果条件不满足则退出 ...