<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<title>自定义组件</title>
<style>
.icon-full {
font-size: 18px;
color: yellow;
}
.icon-none {
font-size: 18px;
color: red;
}
.star-container {
display: inline-block;
color: yellow;
font-size: 18px;
}
.icon-o {
color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<i class="fa fa-star icon-full"></i>
<i class="fa fa-star-o icon-none"></i>
<ul>
<li>
<span>送餐准时</span>
<my-star :num="starList[0]"></my-star>
</li>
<li>
<span>服务态度</span>
<my-star :num="starList[1]"></my-star>
</li>
<li>
<span>饭菜口味</span>
<my-star :num="starList[2]"></my-star>
</li>
<li>
<span>口味包装</span>
<my-star :num="starList[3]"></my-star>
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
Vue.component('my-star', {
template: "<div class='star-container'><i v-for='item in new Array(num)' class='fa fa-star'></i><i v-for='item in new Array(5-num)' class='fa fa-star-o icon-o'></i></div>",
props: ['num']
})
new Vue({
el: ".box",
data: {
starList: [4, 3, 2, 1],
text: "my text content"
}
})
</script>
</body>
</html>
网友评论