iview Badge组件count传值

Badge 徽标数

概述

 #
主要用于通知未读数的角标，提醒用户点击。

<style scoped>

    .demo-badge{

        width: 42px;

        height: 42px;

        background: #eee;

        border-radius: 6px;

        display: inline-block;

    }

</style>

<template>

    <Badge count="3">

        <a href="#" class="demo-badge"></a>

    </Badge>

</template>

<script>

    export default {

        

    }

</script>
count是代表个数，如果要动态传值，可以使用:count="value" 

例如 

<ul>

                                        <li v-for="f in friend">

                                        <a href="#">

                                            <div style="float: left">

                                                <img src="../../img/user2.png" alt="">

                                            </div>

                                            <div style="float: left">

                                                <p style="font-size: 14px;color: #333;margin-top: 6px;margin-left: 10px;" >
{{f.displayName}}</p>

                                                <span style="font-size: 12px;color: #a6a6a6;margin-top: 6px;margin-left: 10px;" v-
if="f.signaTure ==null">还没有签名！</span>

                                                <span style="font-size: 12px;color: #a6a6a6;margin-top: 6px;margin-left: 10px;" v-
else="f.signaTure !=null">{{f.signaTure}}</span>

                                            </div>

                                            <div style="float: right;margin-top: 16px;margin-right: 10px;" >

                                                <Badge :count="f.tourNumber">

                                                    <a href="#" class="demo-badge"></a>

                                                </Badge>

                                            </div>

                                        </a>

                                        </li>

                                    </ul>