diff --git a/src/components/card/card.vue b/src/components/card/card.vue
index bfb973a1..f5714acd 100644
--- a/src/components/card/card.vue
+++ b/src/components/card/card.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="classes">
-        <div :class="headClasses" v-if="showHead" ref="head"><slot name="title"></slot></div>
-        <div :class="extraClasses" v-if="showExtra" ref="extra"><slot name="extra"></slot></div>
+        <div :class="headClasses" v-if="showHead"><slot name="title"></slot></div>
+        <div :class="extraClasses" v-if="showExtra"><slot name="extra"></slot></div>
         <div :class="bodyClasses"><slot></slot></div>
     </div>
 </template>
@@ -51,12 +51,8 @@
             }
         },
         mounted () {
-            if (this.$refs.head) {
-                this.showHead = this.$refs.head.innerHTML != '';
-            }
-            if (this.$refs.extra) {
-                this.showExtra = this.$refs.extra.innerHTML != '';
-            }
+            this.showHead = this.$slots.title !== undefined;
+            this.showExtra = this.$slots.extra !== undefined;
         }
     };
 </script>
diff --git a/test/routers/card.vue b/test/routers/card.vue
index 06f94d6c..c3edcbde 100644
--- a/test/routers/card.vue
+++ b/test/routers/card.vue
@@ -1,42 +1,88 @@
 <template>
-<div>
-    <Card :bordered="true" style="width:300px">
-        <template slot="title">
-            <p>iView2.0</p>
-        </template>
-        <template slot="extra">
-            <Button size="small">More</Button>
-        </template>
-        <p>iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。</p>
+    <Card style="width:350px">
+        <p slot="title">
+            <Icon type="ios-film-outline"></Icon>
+            经典电影
+        </p>
+        <a href="#" slot="extra" @click.prevent="changeLimit">
+            <Icon type="ios-loop-strong"></Icon>
+            换一换
+        </a>
+        <ul>
+            <li v-for="item in movieList">
+                <a :href="item.url" target="_blank">{{ item.name }}</a>
+                <span>
+                    <Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
+                    {{ item.rate }}
+                </span>
+            </li>
+        </ul>
     </Card>
-    <br><br>
-    <Card style="width:300px">
-        <p>Hello</p>
-        <p>iView2.0</p>
-        <h3>Card</h3>
-    </Card>
-</div>
 </template>
 <script>
-    import { Card } from 'iview';
-
     export default {
-        components: {
-            Card
-        },
-        props: {
-
-        },
         data () {
             return {
-
+                limitNum: 5,
+                limitFrom: 0,
+                movieList: [
+                    {
+                        name: '肖申克的救赎',
+                        url: 'https://movie.douban.com/subject/1292052/',
+                        rate: 9.6
+                    },
+                    {
+                        name: '这个杀手不太冷',
+                        url: 'https://movie.douban.com/subject/1295644/',
+                        rate: 9.4
+                    },
+                    {
+                        name: '霸王别姬',
+                        url: 'https://movie.douban.com/subject/1291546/',
+                        rate: 9.5
+                    },
+                    {
+                        name: '阿甘正传',
+                        url: 'https://movie.douban.com/subject/1292720/',
+                        rate: 9.4
+                    },
+                    {
+                        name: '美丽人生',
+                        url: 'https://movie.douban.com/subject/1292063/',
+                        rate: 9.5
+                    },
+                    {
+                        name: '千与千寻',
+                        url: 'https://movie.douban.com/subject/1291561/',
+                        rate: 9.2
+                    },
+                    {
+                        name: '辛德勒的名单',
+                        url: 'https://movie.douban.com/subject/1295124/',
+                        rate: 9.4
+                    },
+                    {
+                        name: '海上钢琴师',
+                        url: 'https://movie.douban.com/subject/1292001/',
+                        rate: 9.2
+                    },
+                    {
+                        name: '机器人总动员',
+                        url: 'https://movie.douban.com/subject/2131459/',
+                        rate: 9.3
+                    },
+                    {
+                        name: '盗梦空间',
+                        url: 'https://movie.douban.com/subject/3541415/',
+                        rate: 9.2
+                    }
+                ]
             }
-        },
-        computed: {
-
         },
         methods: {
-
+            changeLimit () {
+                this.limitFrom = this.limitFrom === 0 ? 5 : 0;
+            }
         }
     }
-</script>
\ No newline at end of file
+</script>