【vue.js】组件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <unit v-for="item in array" :detail="item"></unit>
</div>
</body>
<script>
    Vue.component( 'unit',{
        props:['detail'],
        template:`
          <div style="border:1px #aaabac solid;width:1260px;margin:20px auto;">
            <div>
                <h2>{{detail.title}}</h2>
                <span style="float:right;"><a href="#">{{detail.more}}</a></span>
            </div>
            <div>
                <ul>
                    <li><a href="">{{detail.list[0]}}</a></li>
                    <li><a href="">{{detail.list[1]}}</a></li>
                    <li><a href="">{{detail.list[2]}}</a></li>
                    <li><a href="">{{detail.list[3]}}</a></li>
                    <li><a href="">{{detail.list[4]}}</a></li>
                </ul>
            </div>
          </div> `
        }
    );

    let vm=new Vue({
        el:'#app',
        data:{
            array:[
                {
                    title : '项目实战',
                    more : 'more>>',
                    list : [
                        'JavaEE现实案例-秒杀系统企业级实战应用（真实工业界案例）',
                        '小象区块链视频教程（共二期）',
                        'Python快速入门教程',
                        '炼数成金实战Java高并发程序设计 完整课件',
                        '计算机视觉班 [从CV基础到深度学习实战]',
                    ]
                },
                {
                    title : 'WEB前端开发',
                    more : 'more>>',
                    list : [
                        'ECMAScript6.0视频教程',
                        '珠峰Nodejs深入浅出视频教程',
                        '深入浅出讲解JavaScript设计模式视频教程',
                        '千F EasyUI框架从入门到实战视频教程',
                        '设计必知必会的H5策划与认知视频课程',
                    ]
                },

            ],
        }
    });
</script>
</html>
猜你喜欢
