iview Badge组件count传值
来源:互联网 发布:js select 选中事件 编辑:程序博客网 时间:2024/06/01 07:41
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>
- iview Badge组件count传值
- 如何使用iview组件
- iview组件使用总结
- iView常用组件小技巧!!
- BootStrap--CSS组件-- 徽章(badge)
- iview
- iview page分页组件的集成
- vue iview组件表格 render函数的使用
- iview使用Menu组件动态生成时active-name不起作用
- iview的icon组件怎么添加点击事件
- Vue.js的组件和框架PC与移动 iView elementUI MintUI
- vue+iview 当v-for不渲染问题 因为遇到Modal组件
- 如何在 Vue-cli 创建的项目中引入 iView组件UI
- VUE 中 使用 iview Form组件 enter键防止页面刷新
- 解决iview在requirejs模式下使用报错:组件未注册
- vue2+iview+require实现AMD模式下的组件化开发、按需加载
- Flickr Badge
- test badge
- day02
- python基础知识点:与java类比
- 【Java TCP/IP Socket】 — close()/shutdownOutput()/shutdownInput() 分析
- 安卓获取屏幕真实高度(除去虚拟键盘)
- 分布式系统的架构思路
- iview Badge组件count传值
- 计算机网络基础知识和体系结构
- 在angularJs的ui-view无法使用ng-click的问题
- 自顶向下深入分析Netty(三)--Bootstrap
- java的枚举
- True (False) Positives (Negatives) 相关概念
- 面试题9:变态跳台阶
- tox、subunit和testr
- day03