diff --git a/examples/hello-uniapp/components/uni-badge.vue b/examples/hello-uniapp/components/uni-badge.vue
index 89a22bd5374de2b31f6047497a850a97c8719f6f..24bd3d1689547d646bf14c0061ea233d8ab5cfd1 100644
--- a/examples/hello-uniapp/components/uni-badge.vue
+++ b/examples/hello-uniapp/components/uni-badge.vue
@@ -1,16 +1,31 @@
 <template>
-	<text class="uni-badge" v-if="text" :class="[inverted === true ? 'uni-badge-inverted' : '','uni-badge-'+type]" @click="onClick()">{{text}}</text>
+	<text class="uni-badge" v-if="text" :class="setClass" @click="onClick()">{{text}}</text>
 </template>
 
 <script>
 	export default {
 		props: {
-			type: String,
-			inverted:{
-                type: Boolean,
-                default: false
-            },
-			text:String
+			type: {
+				type: String,
+				default: 'default'
+			},
+			inverted: {
+				type: Boolean,
+				default: false
+			},
+			text: {
+				type: String,
+				default: ''
+			}
+		},
+		computed: {
+			setClass() {
+				let classList = ['uni-badge-' + this.type];
+				if (this.inverted === true) {
+					classList.push('uni-badge-inverted')
+				}
+				return classList.join(" ")
+			}
 		},
 		methods: {
 			onClick() {
@@ -21,8 +36,9 @@
 </script>
 
 <style>
-	.uni-badge,.uni-badge-default {
-		font-family: 'Helvetica Neue',Helvetica,sans-serif;
+	.uni-badge,
+	.uni-badge-default {
+		font-family: 'Helvetica Neue', Helvetica, sans-serif;
 		box-sizing: border-box;
 		font-size: 12px;
 		line-height: 1;
@@ -31,65 +47,66 @@
 		color: #333;
 		border-radius: 100px;
 	}
+
 	.uni-badge.uni-badge-inverted {
 		padding: 0 5px 0 0;
 		color: #929292;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-primary {
 		color: #fff;
 		background-color: #007aff
 	}
-	
+
 	.uni-badge-blue.uni-badge-inverted,
 	.uni-badge-primary.uni-badge-inverted {
 		color: #007aff;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-green,
 	.uni-badge-success {
 		color: #fff;
 		background-color: #4cd964;
 	}
-	
+
 	.uni-badge-green.uni-badge-inverted,
 	.uni-badge-success.uni-badge-inverted {
 		color: #4cd964;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-warning,
 	.uni-badge-yellow {
 		color: #fff;
 		background-color: #f0ad4e
 	}
-	
+
 	.uni-badge-warning.uni-badge-inverted,
 	.uni-badge-yellow.uni-badge-inverted {
 		color: #f0ad4e;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-danger,
 	.uni-badge-red {
 		color: #fff;
 		background-color: #dd524d
 	}
-	
+
 	.uni-badge-danger.uni-badge-inverted,
 	.uni-badge-red.uni-badge-inverted {
 		color: #dd524d;
 		background-color: transparent
 	}
-	
+
 	.uni-badge-purple,
 	.uni-badge-royal {
 		color: #fff;
 		background-color: #8a6de9
 	}
-	
+
 	.uni-badge-purple.uni-badge-inverted,
 	.uni-badge-royal.uni-badge-inverted {
 		color: #8a6de9;