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>