使用vue开发web app - 2 - 创建一个列表控件
课程参考视频:https://egghead.io/lessons/javascript-create-a-list-component-in-vue-js
目录
目的:
- 学会使用v-for进行循环
- 学会使用v-on进行事件绑定
- 学会编写事件响应函数
步骤:
- 创建列表,并绑定数据
<!-- 使用for循环,根据items的个数自动生成li -->
<li v-for="item in items">
<!-- 展示item中text字段 -->
{
{ item.text }}
</li>
- 添加增加按钮,绑定事件,编写添加元素事件内容(addItem)
addItem: function() {
var input = document.getElementById("itemForm");
if (input.value != "") {
this.items.push({
text: input