020——VUE中变异方法push的留言版实例讲解 

<!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>

　　

posted @ 2017-12-21 14:25  生如逆旅，一苇以航  阅读(380)  评论(0)    收藏  举报