21.VUE学习之-操作data里的数组变异方法push&unshit&pop&shift的实例应用讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/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('pre')">发表到前面</button>
<br>
<button v-on:click="del('last')">删除最后一条评论</button>
<button v-on:click="del('first')">删除第一条评论</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 'pre':
this.comments.unshift(content);
break;
}
this.current_content = '';
},
del(type){
switch (type) {
case 'last':
this.comments.pop();
break;
case 'first':
this.comments.shift();
break;
}
}
}
});
</script>
</body>
</html>
效果:
21.VUE学习之-操作data里的数组变异方法push&unshit&pop&shift的实例应用讲解的更多相关文章
- 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> ...
- Vue 变异方法Push的留言板实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
- 20.VUE学习之-变异方法push的留言版实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- 【iOS开发-21】UINavigationController导航控制器初始化，导航控制器栈的push和pop跳转理解
(1)导航控制器初始化的时候一般都有一个根视图控制器,导航控制器相当于一个栈,里面装的是视图控制器,最先进去的在最以下,最后进去的在最上面.在最上面的那个视图控制器的视图就是这个导航控制器对外展示的界 ...
- Vue学习四：v-if及v-show指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...
- 45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 二进制读取 jdbc
package com.itheima.clob.test; import java.io.FileInputStream; import java.io.FileOutputStream; impo ...
- JavaScript 系列--JavaScript一些奇淫技巧的实现方法（一）简短的sleep函数，获取时间戳
一.前言 有些东西很好用,但是你未必知道:有些东西你可能用过,但是你未必知道原理.实现一个目的有多种途径,俗话说,条条大路通罗马.发散一下大家的思维以及拓展一下知识面. 二.实现一个简短的sleep函 ...
- Echarts同一页面多个图表自适应浏览器窗口大小——window.onresize
当前做的一个项目中,频繁使用到百度团队的Echarts,发在一个页面同时出现多个图表时,只有最后一个图表触发了window.onresize事件,查询官方文档后得到解决. 方法如下: hwChart. ...
- Zookeeper崩溃恢复过程(Leader选举)
1. 崩溃恢复 a). leader选择过程可以保证新leader是ZXID最大的节点 b). ZAB协议确保丢弃那些只在leader上被提出的事务,场景 leader发出PROPOSAL收到ACK, ...
- sqlserver2008执行200M以上的大脚本文件，打开脚本总是报“未能完成操作，存储空间不足”
用sqlcmd命令行工具. 1.win7下快捷键:win+R 2.输入cmd,确定 3.输入命令:sqlcmd -S <数据库> -i C:\<数据文件>.sql 例:sql ...
- js和JQuery中offset等属性对比
HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...
- NopI 导出数据
protected void exportAward(DataSet dsResult) { if (dsResult != null) { string fileName = System.Web. ...
- Spring Cloud（3）：Ribbon的使用
基于搭建好的Eureka Server+Eureka Client:https://www.cnblogs.com/xuyiqing/p/10861541.html 有了服务,那么现在学习如何调用服务 ...
- 使用JS实现图片轮播（前后首尾相接）
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...
- ansible 2.1.0 api 编程
pdf文档 https://media.readthedocs.org/pdf/ansible/latest/ansible.pdf api介绍 http://blog.csdn.net/python ...