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

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. cogs 2478. [HZOI 2016]简单的最近公共祖先

    2478. [HZOI 2016]简单的最近公共祖先 ★☆   输入文件:easy_LCA.in   输出文件:easy_LCA.out   简单对比时间限制:2 s   内存限制:128 MB [题 ...

  2. [转]十五天精通WCF——第十三天 用WCF来玩Rest

    在我们玩wcf的时候,都会潜意识的觉得wcf就是通过soap协议交换消息的,并且可以在basic,tcp,msmq等等绑定中任意切换, 牛逼的一塌糊涂,但是呢,如果说哪一天wcf不再使用soap协议, ...

  3. javac compiling error ( mising package)

    javac 编译java源文件时,提示 package does not exist 的错误 Test.java import java.security.MessageDigest; import ...

  4. 猫猫学iOS之UILabel设置圆角不成功所做调控更改

    原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 如图问题 如图是我要做的效果 然而当我写好代码后,设置号label的layer圆角后 ...

  5. 尝试create tech team

    自从上一家公司之后,我很少有机会去带一些新人(公司一般都招一些技术独立性的工程师),特别是经验不是特别多的新小伙伴.在如今管理扁平化的公司,我正逐渐搭建自己的小team,并试图让团队成员快速融入并成长 ...

  6. hdu 4941 Magical Forest (map容器)

    Magical Forest Time Limit: 24000/12000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

  7. BZOJ 2440 中山市选2011 全然平方数 二分答案+容斥原理+莫比乌斯反演

    题目大意:求第k个无平方因子数是多少(无视原题干.1也是全然平方数那岂不是一个数也送不出去了? 无平方因子数(square-free number),即质因数分解之后全部质因数的次数都为1的数 首先二 ...

  8. Mac safari 下iframe的hash取不到BUG

    RT http://192.168.1.66/salaryl#abc 这样的链接是取不到hash的, 需要在最后加上斜杠,如下:http://192.168.1.66/salaryl/#abc fuc ...

  9. bzoj3224: Tyvj 1728 普通平衡树(平衡树)

    bzoj3224: Tyvj 1728 普通平衡树(平衡树) 总结 a. cout<<(x=3)<<endl;这句话输出的值是3,那么对应的,在splay操作中,当父亲不为0的 ...

  10. C#可定制的数据库备份和恢复程序 (讲解流程)

    可定制的数据库备份和恢复程序 tashanzhishi [原作] 关键字 数据库 备份 恢复 出处 在我们做数据库系统的程序时,经常需要为客户做一个数据库的备份和恢复程序,特别是对于一些非专业的数据库 ...