请老师检查一下，谢谢

来源：2-11 编程练习

鲨鱼没有鲨鱼线

2020-05-20 09:47:32

<!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>
        <button v-on:click="delc">删除</button>
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-bind:content="item"
                       v-for="item in list">
            </todo-item>
        </ul>
    </div>

    <script>
        var TodoItem = {
            props: ["content"],
            template: "<li>{{content}}</li>"
        }
        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 = "";
                },
                delc: function(){
                    this.list.pop();
                }
            }
        })
    </script>
</body>
</html>

写回答

1回答