vue实现简单的列表添加功能

实现一个简单的列表添加功能

body中加入如下代码

div框架部分

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

id app的div 由vue接管 里面的数据绑定 插值表达式 都和vue相关，解释一下几个技术点

v-on:click 绑定点击事件  v-model 输入框的双向数据绑定 v-for vue中的循环渲染

vue部分

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

	</script>

可以再data中实现数据，以及methods中实现绑定的点击事件

这就是vue的套路，记住就好了，实现效果如下