vue 组件小练习

来源：互联网发布：c语言两个指针相减编辑：程序博客网时间：2024/05/16 01:29

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>vue 组件</title>    <script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>    <style>        .list{width:50%;margin:0 auto;border-bottom:1px solid #e6e6e6;padding:20px;}        .left{float: left;width:80%;}        .right{float: right;width:19%;}        .right img{width:100px;height:100px;border:1px solid #e6e6e6;display: block;margin:0 auto;}        .clearfix{clear:both;}    </style></head><body>    <div class="listcontainer">        <my-list v-for="item in listdata" :listcon="item"></my-list>    </div></body><script>    Vue.component('my-list',{        props:['listcon'],        template:'<div class="list"><div class="left"> <div>{{listcon.title}}</div> <div>{{listcon.date}}</div> <div>{{listcon.simple}}</div> </div> <div class="right"> <img :src="listcon.imgsrc" alt=""> </div> <div class="clearfix"></div> </div>'        });    let list = new Vue({        el:'.listcontainer',        data:{            listdata:[                {                    title:"标题1",                    date:"2017-10-24",                    simple:"简单介绍",                    imgsrc:"1.jpg"                },                {                    title:"标题2",                    date:"2017-10-2",                    simple:"简单介绍2",                    imgsrc:"2.jpg"                }            ]        }    });</script></html>

阅读全文

0 0

vue 组件 小练习

vue 组件小练习