iview/examples/routers/list.vue

<template>
    <div>
        <h2>small size</h2>
        <List header="Header" footer="Footer" size="small" :split="false">
            <ListItem v-for="item in data1" :key="item">
                {{ item }}
            </ListItem>
        </List>
        <h2>default size</h2>
        <List header="Header" footer="Footer">
            <ListItem v-for="item in data1" :key="item">
                {{ item }}
            </ListItem>
        </List>
        <h2>large size</h2>
        <List header="Header" footer="Footer" border size="large">
            <ListItem v-for="item in data1" :key="item">
                {{ item }}
            </ListItem>
        </List>

        <Divider>没有 </Divider>

        <List>
            <ListItem v-for="item in data2" :key="item.title">
                <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">
                </ListItemMeta>
                一段内容
            </ListItem>
        </List>

        <Divider>带有 Action</Divider>

        <List>
            <ListItem v-for="item in data2" :key="item.title">
                <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">

                </ListItemMeta>
                一段内容
                <template slot="action">
                    <li>
                        <a href="">edit</a>
<!--                        <Button typr="primary">编辑</Button>-->
                    </li>
                    <li>
                        <a href="">more</a>
<!--                        <Button>删除</Button>-->
                    </li>
                </template>
            </ListItem>
        </List>

        <Divider>带图片</Divider>
        <List item-layout="vertical">
            <ListItem v-for="item in data2" :key="item.title">
                <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description">

                </ListItemMeta>
                We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
                <template slot="action">
                    <li>
                        <Icon type="ios-star-outline" /> 156
                    </li>
                    <li>
                        <Icon type="ios-thumbs-up-outline" /> 156
                    </li>
                    <li>
                        <Icon type="ios-chatbubbles-outline" /> 10
                    </li>
                </template>
                <template slot="extra">
                    <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
                </template>
            </ListItem>
        </List>

    </div>
</template>
<script>
    export default {
        data () {
            return {
                data1: [
                    'Racing car sprays burning fuel into crowd.',
                    'Japanese princess to wed commoner.',
                    'Australian walks 100km after outback crash.',
                    'Man charged over missing wedding girl.',
                    'Los Angeles battles huge wildfires.',
                ],
                data2: [
                    {
                        title: 'This is a title 1',
                        description: 'This is the description, This is the description, This is the description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
                    },
                    {
                        title: 'This is a title 2',
                        description: 'This is the description, This is the description, This is the description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
                    },
                    {
                        title: 'This is a title 3',
                        description: 'This is the description, This is the description, This is the description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
                    },
                    {
                        title: 'This is a title 4',
                        description: 'This is the description, This is the description, This is the description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
                    },
                    {
                        title: 'This is a title 5',
                        description: 'This is the description, This is the description, This is the description.',
                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
                    }
                ]
            };
        }
    };
</script>