请检查，谢谢

来源：2-14 编程练习

鲨鱼没有鲨鱼线

2020-05-20 12:01:53

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue" />
        <button v-on:click="hdc">添加</button>
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item :content="item"
                       :index="index"
                       v-for="(item, index) in list"
                       v-on:delete="hdd">
            </todo-item>
        </ul>
    </div>

    <script>
        var TodoItem = {
            props: ["content", "index"],
            template: "<li v-on:click='hic'>{{content}}</li>",
            methods: {
                // 子组件点击触发delete
                hic: function () {
                    this.$emit("delete", this.index);
                }
            }
        }
        var app = new Vue({
            el: "#app",
            data: {
                list: [],
                inputValue: ""
            },
            // 注册组件
            components: {
                TodoItem: TodoItem
            },
            methods: {
                // 添加按钮点击添加
                hdc: function(){
                    // 判空
                    // if(!this.inputValue) return;
                    if(this.inputValue.trim() == "") return;

                    // 把输入的值添加进列表
                    this.list.push(this.inputValue);
                
                    // 输入框值置为零
                    this.inputValue = "";
                },
                // 父组件执行加一
                hdd: function (index) {
                    let addNum = Number(this.list[index]) + 1;
                    this.list.splice(index, 1, addNum);
                    
                }
            }
        })
    </script>
</body>
</html>

写回答

1回答