这组件好像有问题,不知道是我们项目环境造成的还是什么,初始化半星不能正常显示,显示的全星。

1.template

<div style="display:inline-block;margin-right:100px;vertical-align:3px;">
<span style="font-size:16px;color:#fff;line-height:20px;vertical-align:-3px;">评分:</span>
<Rate allow-half show-text v-model="startValue" @on-change='getScore'><span style="color: #f5a623;display: inline-block;width: 30px;">{{ startValue}}分</span></Rate>
</div>

2.在data中设置星星的数量绑定

data () {
return {
startValue: 0, // 评分级别
score: 0, // 评分级别
}
}

3.methods

可以通过on-change触发星星改变事件

// 得到分数
getScore () {
this.score = this.startValue
},

ivew使用星星评分的更多相关文章

  1. HTML5商城开发三 jquery 星星评分插件

    展示:

  2. angularjs实现星星评分

    angularjs实现星星评分 自定义指令 app.directive('myStars', function () { return { require : '?ngModel', // ?ngMo ...

  3. js点亮星星评分并获取参数的js代码

    点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...

  4. vue2.0:(九)、外卖App弹窗部分星星评分

    本篇是星星评分部分,先上代码: 1.header.vue: <template> <transition name="fade">            & ...

  5. Android星星评分控件RatingBar的使用

    在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...

  6. 微信小程序——星星评分

    先来个效果图镇楼: 实现原理: 1.循环需要评分的列表,判断它的分数 与 当前星星索引的大小: 2.点击,获取星星对应的分数,让星星高亮. 代码: star.wxml: <view class= ...

  7. vue 星星评分组件

    显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...

  8. wex5中的星星评分

    新建一个空白的.w文件,然后在页面上放5个img星星图片 重要的是图片路径不能是绝对路径,要用相对路径,不然js操作的时候会出bug 添加两个label标签(标签随你挑,在这我就用label) 你到时 ...

  9. jQuery实现星星评分功能

    一.这是我做的调查问卷中的一个功能.(第三方MVC框架) 二.功能说明:1.用户点击星星,将值放到隐藏域中.2.用户可以重新点击星星修改回答. 前台JS代码: <script type=&quo ...

随机推荐

  1. VS2010: 远程访问IIS Express

    可以远程访问IIS Express的意义在于:1.    可以从其它设备上Debug项目,这点对于手持设备等不是很容易用虚拟机虚拟的设备尤为重要.2.    可以避免过早配置IIS 7(不一定是好事. ...

  2. CF #319 div 2 E

    在一个边长为10^6正方形中,可以把它x轴分段,分成1000段.奇数的时候由底往上扫描,偶数的时候由上往下扫描.估计一下这个最长的长度,首先,我们知道有10^6个点,则y邮方向最多移动10^3*10^ ...

  3. 关于卷积网络以及反卷积网络shape的计算

    CNN的计算方式: w1 = (w - F_w + 2p) / s_w + 1 h1 = (h - F_h + 2p) / s_h + 1 其中 w, h 分别为上一层的宽高, Filters(ker ...

  4. Android Gallery2源代码分析

    打开图库中图片为什么从模糊变清晰 1. 有一点要明白,图片要进行显示,首先要先将图片进行decode,然后才干显示 2. 图片decode须要时间,越大的图片,细节越多的图片,那么它decode时间就 ...

  5. hdu5044(二分)

    题意:一个树上建两个加油站.使得全部点到达其近期加油站的最大距离最小. 解法:二分答案.关键时二分时候,要最合理话布局两个点的位置,做法是处理出来树的直径,然后在直径两端分别向中间移动二分的x步的两个 ...

  6. iOS开发网络篇之Web Service和XML数据解析

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主.捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  7. Python入门 五、学着机器思考

    正则表达式(1) import re text = "Hi,I am Shirley Hilton.I am his wife." m = re.findall(r"hi ...

  8. Anagram Groups(字符串)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2316 理解错一点题意就能WA到死...题中对于 ...

  9. codeforces——思路与规律

    codeforces 804B     http://codeforces.com/problemset/problem/804/B /* 题意:给定一个只含ab的序列,每次操作可将ab变为bba 问 ...

  10. lowbit( )运算

    --------开始-------- lowbit (n) 定义为非负整数n在二进制表示下“最低位的1及其后面所有的0构成的数值. 比如: n = 10 的二进制下为1010,则lowbit (n) ...