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() 方法用于把数组的第一个元素从其中删除,并返回 ...
随机推荐
- C语言中，嵌套的if语句的一些经验...
double f(double x){double result;if(x<0)result=-x+sin(x);else if(x==0)result=0; else if(10> ...
- 【ECNU71】一个游戏（水题）
点此看题面 大致题意: \(n\)种元素,有若干组将\(x\)元素转化为\(y\)元素的操作.问对于所有可能的元素拥有状况,改变转化操作的顺序,是否会影响转化后最终的结果. 水题 虽说是这么水的题,但 ...
- C++教程详解
第一篇:基础篇 简介.环境配置.基本语法.注释.数据类型.变量类型.变量作用域.常量.修饰符类型. 存储类.运算符.循环.判断.函数.数字.数组.字符串.指针.引用.日期&时间. 基本的输入输 ...
- 趣谈Linux操作系统学习笔记：第二十四讲
一.小内存的分配基础 1.kmem_cache_alloc_node的作用 通过这段代码可以看出,它调用了kmem_cache_alloc_node函数,在task_struct的缓存区域task_s ...
- 【译】3D打印：介绍
原文地址:(需要翻墙)https://ordina-jworks.github.io/iot/2018/09/28/3D-Printing-Intro.html 文章发表日期:2018-09-28 第 ...
- Net Core 3.0 尝鲜指南
swagger .Net Core 3.0中的swagger,必须引用5.0.0 及以上版本.可以在Nuget官网查看版本.目前最新版本(2019-9-25) 5.0.0rc3 Install-Pac ...
- vscode源码分析【四】程序启动的逻辑，最初创建的服务
第一篇: vscode源码分析[一]从源码运行vscode 第二篇:vscode源码分析[二]程序的启动逻辑,第一个窗口是如何创建的 第三篇:vscode源码分析[三]程序的启动逻辑,性能问题的追踪 ...
- Mixin Messenger 源码解读 1 — — WCDB Swift
Mixin Messenger 早期采用 FMDB 后来切换至 WCDB 沿用至今,一直比较可靠稳定,这里分享一下使用心得和功能扩展. 关于 Mixin Messenger Mixin Messeng ...
- 1+X证书web前端开发中级对应课程分析
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/ 1+x 证书 Web 前端开发初 ...
- Mysql优化之Explain查询计划查看
我们经常说到mysql优化,优化中一种常见的方式就是对于经常查询的字段创建索引.那么mysql中有哪些索引类型呢? 一.索引分类1.普通索引:即一个索引只包含单个列,一个表可以有多个单列索引 2.唯一 ...