组件(vue练习例子)

最新推荐文章于 2023-03-25 13:18:42 发布

lucky芬

最新推荐文章于 2023-03-25 13:18:42 发布

阅读量1.1k

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/daimomo000/article/details/79355959

版权

Vue.js 专栏收录该内容

17 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        [v-cloak]{display: none;}
    </style>
</head>
<body>
<div id="app">
    <my-component-list :datalist="list"></my-component-list>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<script type="text/javascript">
new Vue({
    el:"#app",
    data:{
        list:[{
            name:"肖申克救赎",
            year:1994
        },{
            name:"霸王别姬",
            year:1993
        },{
            name:"这个杀手不太冷",
            year:1994
        },{
            name:"阿甘正传",
            year:1994
        },{
            name:"美丽人生",
            year:1997
        },{
            name:"千与千寻",
            year:2001
        },{
            name:"辛德勒的名单",
            year:1993
        },{
            name:"泰坦尼克号",
            year:1997
        },{
            name:"盗梦空间",
            year:2010
        },{
            name:"机器人总动员",
            year:2008
        }]
    },
    //局部注册
    components:{
        "my-component-list":{
            template:'<ul><li v-for="item in datalist">{{item.name}}<span>[{{item.year}}年]</span></li></ul>',
            props:["datalist"]
        }
    }
})
</script>
</body>
</html>