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