2-11 编程练习代码提交

来源：2-11 编程练习

MiMicccc

2021-09-11 00:17:53

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 在此补充代码 -->
        <input v-model="inputValue" type="text" placeholder="请输入...">
        <button v-on:click="btnAdd">添加</button>
        <button v-on:click="btnDel">删除</button>
        <ul>
            <list-item v-bind:content="item" v-for="item in list">{{item}}</list-item>
        </ul>
    </div>
    <script>
        // 在此补充代码

        // 全局组件
        // Vue.component('ListItem', {
        //     props: ['content'],
        //     template: '<li>{{content}}</li>'
        // })

        // 局部组件
        var ListItem = {
            props: ['content'],
            template: '<li>{{content}}</li>'
        }

        var app = new Vue({
            el: "#app",
            // 在此补充代码
            components: { ListItem: ListItem },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                btnAdd: function (index) {
                    if (!this.inputValue) return;
                    this.list.push(this.inputValue);

                    this.inputValue = '';
                },
                btnDel: function (index) {
                    if (this.list.length) {
                        this.list.pop();
                    } else {
                        alert("已经没有东西可以删除了！");
                    }
                }
            }
        })
    </script>
</body>

</html>

写回答

1回答