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

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. [bzoj1855][Scoi2010]股票交易_动态规划_单调队列

    股票交易 bzoj-1855 Scoi-2010 题目大意:说不明白题意系列++...题目链接 注释:略. 想法:这个题还是挺难的. 动态规划没跑了 状态:dp[i][j]表示第i天手里有j个股票的最 ...

  2. LINUX 内核 图 外国牛人

    http://duartes.org/gustavo/blog/ http://blog.csdn.net/drshenlei

  3. HDU 5239 上海大都会 D题(线段树+数论)

    打表,发现规律是存在一定次数(较小)后,会出现a=(a*a)%p.可以明显地发现本题与线段树有关.设置标记flag,记录本段内的数是否均已a=a*a%p.若是,则不需更新,否则更新有叶子结点,再pus ...

  4. CreateDialog Win32 API调用的一个小问题

    在老版本号的VC编译器上.关键调用是下面2句: InitCommonDialogs(); HWND hwndDialog = CreateDialog(hInstance, "IDD_XXX ...

  5. wpf 样式的调用

    这个针对异地调用: 1.在主程序的项目中新建一个Skins的目录.然后再目录里新建一个BlackSkin.xaml的字典资源: <ResourceDictionary xmlns="h ...

  6. HDU 3572 Task Schedule(ISAP模板&amp;&amp;最大流问题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=3572 题意:m台机器.须要做n个任务. 第i个任务.你须要使用机器Pi天,且这个任务要在[Si  , ...

  7. c# 删除程序占用的文件,强力删除文件,彻底删除文件,解除文件占用

    c# 删除程序占用的文件.清理删除文件.彻底删除文件,解除文件占用 文件打开时,以共享读写模式打开 FileStream inputStream = new FileStream(name, File ...

  8. elasticsearch date_histogram

    (5)Date Histogram Aggregation 时间直方图聚合,专门对时间类型的字段做直方图聚合.这种需求是比较常用见得的,我们在统计时,通常就会按照固定的时间断(1个月或1年等)来做统计 ...

  9. MVC + Redis

    net MVC + Redis(hash入库+log4net集成) https://www.cnblogs.com/hoyu/p/9063675.html 博客四元素 既然要写一个博客类的网站,那就应 ...

  10. vs code golang代码自动补全

    “go.useCodeSnippetsOnFunctionSuggest”: true 文件-->首选项--->设置--->用户设置 添加下行:然后就可以自动补全了,包括() “go ...