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

最新推荐文章于 2026-06-14 14:59:31 发布

原创最新推荐文章于 2026-06-14 14:59:31 发布 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#web app

web前端专栏收录该内容

2 篇文章

订阅专栏

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

使用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.value
                    })
                    input.value = "";
                }

            }

添加删除按钮，绑定事件，编写删除元素事件内容(deleteItem)

         deleteItem: function(index) {
                this.items.splice(index, 1)
            }

基本要求

了解json数据格式；
了解基本html使用；
js的基础知识

源码：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <!-- 引入cdn的vue.js文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 创建card的div -->
    <div id="card">
        <!-- 展示vue数据data中的title字段 -->
        <header>{{ title }}</header>

        <div>
            <!-- keypress.enter进行事件绑定，绑定keypress.enter事件（即按下键盘回车事件），调用vue中的addItem函数 -->
            <input id="itemForm" v-on:keypress.enter="addItem" />
            <!-- v-on:click进行事件绑定，绑定click事件，调用vue中的addItem函数 -->
            <button v-on:click="addItem">添加人物</button>
        </div>
        <ul>
        <!-- 使用for循环，根据items的个数自动生成li -->
            <li v-for="(item,index) in items">
                    <!-- v-on:click进行事件绑定，绑定click事件，调用vue中的delteItem函数，并传入参数index -->
                <button v-on:click="deleteItem(index)">x</button>
                {{ item.text }}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: "#card",
        data: {
            title: "哆啦A梦人物列表",
            items: [{
                text: "野比大雄"
            }, {
                text: "静香"
            }, {
                text: "胖虎"
            }, ]

        },
        methods: {
            addItem: function() {
                var input = document.getElementById("itemForm");

                if (input.value != "") {
                    this.items.push({
                        text: input.value
                    })
                    input.value = "";
                }

            },
            deleteItem: function(index) {
                this.items.splice(index, 1)
            }
        }
    })
    </script>
</body>

</html>