沈阳百度网站排名,图片设计制作软件,147seo采集工具,平面设计培训平台我们知道#xff0c;许多外卖app都有评分的星星#xff0c;这里我总结一下对评分组件的开发#xff0c;学习视频#xff1a;饿了么实战#xff08;慕课网#xff09; 1.html部分 div classstar :classstarTypespan v-foritemC…我们知道许多外卖app都有评分的星星这里我总结一下对评分组件的开发学习视频饿了么实战慕课网 1.html部分 div classstar :classstarTypespan v-foritemClass in itemClasses :classitemClass classstar-item track-by$index/span
/div 解释 在大的div里绑定starType是因为在整个App中有多个评分组件而它们的大小不一样所以根据大小动态的绑定class.同样的原理在上一节header组件开发中也有介绍但直到写到这里我开始渐渐明白vue.js中:class的意义。以前我想既然可以直接添加class为什么要用绑定class来多此一举。现在我明白的基础的样式设定直接添加class就可以了但是有时候涉及到根据不同的状态有不同的样式时就要用绑定class了。 v-for 这里我们没有写5个span而是遍历itemClasses这是vue.js中的一种常用方法。既减少了代码而且动态获取数据。2.js部分 1. 得到评分数据 像上一节一样我们通过props来接收数据。我们要接收的是两个number类型的数据一个是星星的尺寸一个是分数。 props: {size:{type:Number},score:{type:Number}} 2.属性的计算 1.接收size动态绑定不同的class starType() {return star-this.size;} .star-48 {width: 20px;height: 20px;margin-right: 22px;background-size: 20px 20px;}.star-36 {width: 15px;height: 15px;margin-right: 6px;background-size: 15px 15px;}.star-24 {width: 10px;height: 10px;margin-right: 3px;background-size: 10px 10px;} 2. 通过计算确定添加全星半星和无星 const LENGTH 5;
const CLS_ON on;
const CLS_HALF half;
const CLS_OFF off; itemClasses() {let result [];let score Math.floor(this.score*2)/2;let hasDecimal score%1 ! 0;let integer Math.floor(score);for (var i 0; i integer; i) {result.push(CLS_ON);}if(hasDecimal) {result.push(CLS_HALF);}while (result.lengthLENGTH) {result.push(CLS_OFF);}return result;} 这段代码的思路是创建一个数组储存星星判断分数是否在.5以上将分数取整有多少分push几个on星星进去有.5以上push一个half然后push进off直到长度达到5。 3.css部分 以star-48的尺寸为例 .star-48 .on {background-image: url(star48_on2x.png)}.star-48 .half {background-image: url(star48_half2x.png)}.star-48 .off {background-image: url(star48_off2x.png)} 4.完整代码 templatediv classstar :classstarTypespan v-foritemClass in itemClasses :classitemClass classstar-item track-by$index/span/div
/templatescript typetext/javascriptconst LENGTH 5;const CLS_ON on;const CLS_HALF half;const CLS_OFF off;export default {props: {size:{type:Number},score:{type:Number}},computed:{starType() {return star-this.size;},itemClasses() {let result [];let score Math.floor(this.score*2)/2;let hasDecimal score%1 ! 0;let integer Math.floor(score);for (var i 0; i integer; i) {result.push(CLS_ON);}if(hasDecimal) {result.push(CLS_HALF);}while (result.lengthLENGTH) {result.push(CLS_OFF);}return result;}}};
/script
style typetext/css.star {font-size: 0;}/* .star-48 {width: 20px;height: 20px;margin-right: 22px;background-size: 20px 20px;} */.star-48 : last-chlid {margin-right: 0;}.star-48 .on {background-image: url(star48_on2x.png)}.star-48 .half {background-image: url(star48_half2x.png)}.star-48 .off {background-image: url(star48_off2x.png)}.star-36 {width: 15px;height: 15px;margin-right: 6px;background-size: 15px 15px;}.star-36 .no {background-image: url(star36_on2x.png)}.star-36 .half {background-image: url(star36_half2x.png)}.star-36 .off {background-image: url(star36_off2x.png)}.star-24 {width: 10px;height: 10px;margin-right: 3px;background-size: 10px 10px;}.star-24 .no {background-image: url(star24_on2x.png)}.star-24 .half {background-image: url(star24_half2x.png)}.star-24 .off {background-image: url(star24_off2x.png)}.star-item {display: inline-block;background-repeat: no-repeat;width: 20px;height: 20px;margin-right: 22px;background-size: 20px 20px;}
/style 转载于:https://www.cnblogs.com/huyuzhu/p/6949766.html
