老师检查一下,是否需要修改

来源:2-11 编程练习

慕函数4234673

2020-05-19 09:28:44

<!DOCTYPE html>

<html>

<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 type="text" v-model="inputvalue">

       <button v-on:click="adds">增加</button>

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

       <ul>

           <tode-item v-bind:content="item" v-for="item in list">{{item}}</tode-item>

       </ul>

        </div>

        <script>

            // 在此补充代码

        var todeItem={

            props:['content'],

            template:"<li>{{content}}<li>"

        }

            var app = new Vue({

            el: "#app",

            components:{

                todeItem:todeItem

            },

             data:{

                 inputvalue:"",

                 list:[]

             },

             methods:{

                 adds:function(){

                     if(this.inputvalue!==""){

                     this.list.push(this.inputvalue)

                     this.inputvalue=""

                     }

                 },

                 plus:function(){

                     this.list.pop()

                 }

             }

            })

        </script>

    </body>

</html>


写回答

1回答

好帮手慕星星

2020-05-19

同学你好,测试代码的时候出现了警告

http://img.mukewang.com/climg/5ec357fc097f2d5109830672.jpg

但是浏览器解析的时候自动纠正了

http://img.mukewang.com/climg/5ec35819094b1d5302170089.jpg

所以效果是正确的。建议修改完善

http://img.mukewang.com/climg/5ec3583a0901225705640103.jpg

祝学习愉快!

0

0 学习 · 10739 问题

查看课程