从零开始学习Vuejs前端框架(二)

今天开始学习vueJs第二天,主要是学习使用vuejs做一个TODO的列表,使用了v-model,

v-model是一个指令,限制在<input>、<select>、<textarea>、components中使用

官方的说法是:

 

我则是直接把他当成是html里面的input的一个name,不过有区别的是这个通过v-model使用的这个值inputValue,直接可以取出他所包含的值。

以下的程序则是将input框里输入的值,直接以列表的形式显示出来。

通过handleBtnClickh函数对按钮进行监听,将input里面的值打印到列表里。

使用的list数组则是用来接收inputValue的值。

<!DOCTYPE html>
<html>
<head>
	<title>TODOLIST</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputValue">
		<button v-on:click="handleBtnClick">提交</button>

		<ul>
			<li v-for="item in list">{{item}}</li>

		</ul>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				list: [],
				inputValue: ''
			},
			methods: {
				handleBtnClick: function(){
					this.list.push(this.inputValue);
					this.inputValue = '';
					//alert(this.inputValue)
				}
			}
		})
	</script>
</body>
</html>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注