<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>变异方法push的留言版实例讲解</title>

		<script src="vue.js"></script>

	</head>

	<body>

		<div id="lantian">

			<li v-for="v in comments">

				{{v.content}}

			</li>

			<textarea v-model="current_content" rows="10" cols="50"></textarea><br />

			<button v-on:click="push">提交</button>

		</div>

		<script>

			var app=new Vue({

			el:'#lantian',

			data:{

				current_content:'',

				comments:[

					{content:'小二'},

					{content:'小三'}

				]

			},

			methods:{

				push(){

					var content={content:this.current_content};

					this.comments.push(content);

					this.current_content='';

				}

			}

		});

		</script>

	</body>

</html>

　　

020——VUE中变异方法push的留言版实例讲解的更多相关文章

  1. 20.VUE学习之-变异方法push的留言版实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue 变异方法Push的留言板实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 021——VUE中变异方法 push/unshift pop/shift

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

  5. 022——VUE中remove()方法的使用：

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  7. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  8. Vue中this.$router.push参数获取（通过路由传参）【路由跳转的方法】

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...

  9. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

随机推荐

  1. XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017　Problem J. Terminal

    题目:Problem J. TerminalInput file: standard inputOutput file: standard inputTime limit: 2 secondsMemo ...

  2. $python collections库

    collections库是python内置的集合库,本文主要讲解以下5种数据结构的用法: namedtuple 命名元组,是tuple的子类 deque 双向列表 defaultdict 有默认值的字 ...

  3. manager

    S 识别  M 买账 A-安排 R-认同 T-提问识别上级的沟通特点,判断形势,识别沟通的时机摆正自己的角色位置,礼多人不怪,回应情绪做好沟通准备,有策略,安排合适时间听取反馈意见,认同并接纳指导提问 ...

  4. 设置小窗口Activity

    http://blog.csdn.net/xieyihua1994/article/details/52586270 我们知道Activity本身是没有界面的.所以activity类创建了一个窗口,开 ...

  5. yum安装memchache

    转载地址:http://www.cnblogs.com/jiunadianshi/articles/2001334.html 标准的CentOS5软件仓库里面是没有memcache相应的包的,所以,我 ...

  6. Thinkphp5.0实战开发一------命名空间详解

    序言 ThinkPHP是一个快速.兼容而且简单的轻量级国产PHP开发框架,使用ThinkPHP框架可以极大简化我们的开发过程,节省时间.这个专题我将记录自己学习使用ThinkPHP5.0的进行实战开发 ...

  7. 20145322《Java程序设计》第2次实验报告

    20145322<Java程序设计>第2次实验报告 实验步骤与内容 一.实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4. ...

  8. linux 第三周

    linux内核目录结构 arch目录包括了所有和体系结构相关的核心代码.它下面的每一个子目录都代表一种Linux支持的体系结构,例如i386就是Intel CPU及与之相兼容体系结构的子目录.PC机一 ...

  9. 分布式系列 - dubbo服务发布

    单元测试OK,封装为Dubbo服务.   添加依赖 pom.xml   <properties>       <dubbo.version>2.5.3</dubbo.ve ...

  10. Springboot-mongodb MongoRepository接口 save方法 详解

    问题: 我们都知道 mongodb 有两种添加数据的方式  一种 就是  save 方法   另外一种 insert  方法 这里两个方法 唯一的区别就是 insert:当主键"_id&qu ...