老师,检查一下

来源:2-11 编程练习

前端小白zm

2020-09-12 10:48:21

<!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="./vue.js"></script>

</head>

    <body>

        <div id="app">

        <!-- 在此补充代码 -->

        <input type="text" v-model="inputValue">

        <button v-on:click="AddClick">添加</button>

        <button v-on:click="DelateClick">删除</button>

        <ul>

            <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",

            // 在此补充代码

            components:{

                TodoItem:TodoItem

            },

            data:{

                list:[],

                inputValue:""

            },

            methods:{

                AddClick:function(){


                    if(this.inputValue!=""){

                        this.list.push(this.inputValue);

                        this.inputValue=""

                    }

                    

                },

                DelateClick:function(){

                    this.list.pop()

                }

            }

            })

        </script>

    </body>

</html>


写回答

1回答

好帮手慕久久

2020-09-12

同学你好,代码正确,很棒,祝学习愉快!

0

0 学习 · 10739 问题

查看课程