使用vue开发web app - 2 - 创建一个列表控件

最新推荐文章于 2024-09-02 15:51:54 发布

Jianle2546

最新推荐文章于 2024-09-02 15:51:54 发布

阅读量1.8k

点赞数

分类专栏： web前端文章标签： web app

本文链接：https://blog.csdn.net/lele9001/article/details/53954286

版权

本篇博客介绍如何使用Vue.js开发web应用，重点在于创建一个列表控件。通过学习，你可以掌握v-for指令来实现数据循环，v-on指令进行事件绑定，以及编写响应式事件处理函数。博客内容包括创建列表、添加和删除按钮的功能实现，要求读者具备JSON、HTML基础和JavaScript知识。

摘要由CSDN通过智能技术生成

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