<!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. 深拷贝与浅拷贝js，方法

    在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生. 参考 ...

  2. HDU - 4786 Fibonacci Tree (MST)

    题意:给一张由白边和黑边构成的无向图,求是否存在一个生成树,使白边的数量为一个斐波那契数. 分析:白边权值为1,黑边权值为0.求出该图的最小生成树和最大生成树,若这两个值之间存在斐波那契数,则可以,若 ...

  3. 20145316《Java程序设计》第二周学习总结

    20145316<Java程序设计>第2周学习总结 教材学习内容总结 3.1.1 Java的类型 分为基本类型(Primitive type)和类类型(Class type) 基本类型: ...

  4. PHP引入框架包

    引入包 之后 在写代码的时候会有提示. 流程: 项目名称右击->包含目录->TAB页签选择库-> add external source folder 找到需要的包.

  5. 某Facebook工程师写的攻略。

    Chapter 1 Interesting read, but you can skip it. Chapter 2 2.1 Insertion Sort - To be honest you sho ...

  6. 如何用纯 CSS 创作一个变色旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 ...

  7. HelloWorld程序编写调试及错误解决

    HelloWorld程序编写调试及错误解决 eclipse软件编写 相较于windows内置记事本,eclipse编写程序更为简单快捷.由其生成的程序模板编写如下: package helloworl ...

  8. java第四周学习总结

    学号20145336 <Java程序设计>第4周学习总结 教材学习内容总结 继承 继承符合(Don't Repeat Yourself)原则,即在自己的代码中不要重复自己编写的信息,这在多 ...

  9. 彻底搞懂hashCode与equals的作用与区别及应当注意的细节

    以前写程序一直没有注意hashCode的作用,一般都是覆盖了equals,缺没有覆盖hashCode,现在发现这是埋下了很多潜在的Bug!今天就来说一说hashCode和equals的作用. 先来试想 ...

  10. wamp 环境下配置多台虚拟主机

    首先启动wamp,成功之后,单击图标,找到Apache服务器下的 httpd.conf ,直接打开 按下Ctrl+F键,在搜索框中搜索 Virtual hosts, 搜寻结果如下图: 3. 然后打开w ...