欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-16 21:29:52
...

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

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的套路,记住就好了,实现效果如下

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