Vue--slot作业

最新推荐文章于 2023-08-13 12:46:30 发布

AsaZyf

最新推荐文章于 2023-08-13 12:46:30 发布

阅读量248

点赞数

分类专栏： Vue 文章标签： Vue slot slot题目插槽

本文链接：https://blog.csdn.net/AsaZyf/article/details/83749920

版权

Vue 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

require：将title和arrlist的内容显示在页面上

code：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="app">
            <item  :list="list">
                <template slot-scope="props">
                    <li>
                      
                    </li>
                </template>
            </item>
            
            <item  :list="news">
                <template slot-scope="props">
                    <li>
                        {{props.item}}
                    </li>
                </template>
            </item>
        </div>
        <script>
            Vue.component("item",{
                data(){
                    return {
                        
                    }
                },
                props:["list"],
                template:`
                    <ul>                        
                        <slot v-for="item in list" :item="item" ></slot>
                    </ul>
                `,
            })
        
            new Vue({
                el:"#app",
                data:{
                    list:[{
                        title:"这是标题1",
                        arrlist:[
                            {"content":"内容1"},
                            {"content":"内容2"},
                            {"content":"内容3"},
                            {"content":"内容4"},
                        ]
                    }
                        ],
                    news:[1,2,3,4]
                }
            })
        </script>
    </body>
</html>

answer：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="app">
            <item  :list="list">
                <template slot-scope="props">
                    <li>
                        {{props.item.title}}
                    </li>
                    <li v-for="item in props.item.arrlist" :item="item.content">
                        {{item.content}}
                    </li>
                </template>
            </item>
            
            <item  :list="news">
                <template slot-scope="props">
                    <li>
                        {{props.item}}
                    </li>
                </template>
            </item>
        </div>
        <script>
            Vue.component("item",{
                data(){
                    return {
                        
                    }
                },
                props:["list"],
                template:`
                    <ul>                        
                        <slot v-for="item in list" :item="item" ></slot>
                    </ul>
                `,
            })
        
            new Vue({
                el:"#app",
                data:{
                    list:[{
                        title:"这是标题1",
                        arrlist:[
                            {"content":"内容1"},
                            {"content":"内容2"},
                            {"content":"内容3"},
                            {"content":"内容4"},
                        ]
                    }
                        ],
                    news:[1,2,3,4]
                }
            })
        </script>
    </body>
</html>