vue组件写评价小星星并获取值

最新推荐文章于 2021-04-22 16:02:05 发布
最新推荐文章于 2021-04-22 16:02:05 发布
阅读量298 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hidsl/article/details/106759690
版权
本文介绍了如何在Vue项目中创建一个评价星星组件，利用font-awesome库来设定星星样式，并实现点击星星选择评分的功能。
摘要由CSDN通过智能技术生成

1、引入font-awesome，引入星星样式，给星星设置样式


    <style>
        .star {
   
            color: yellow;
            font-size: 30px;
        }
    </style>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<div id="app">
        {
  {score1}}--{
  {score3}}--
        <star :count="5" :score="0" label="物流评分&
最低0.47元/天 解锁文章
Hi，dsl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue的星级评分功能
02-23
基于Vue的星级打分功能，代码一共才70行，非常的简单易用，解压即可运行看效果 ，代码注释十分详细，思路都在！2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
vue评分组件|awesome-vue-star-rating
delmarks的博客
02-13 845
awesome-vue-star-rating是一款纯vue评分插件，它可以自定义的评分和评分说明，自定义的星数等，简单易用。
封装星星评分视图
马玉文的博客
07-13 458
星星评分的核心是放置两张星星视图，一张灰色，一张黄色，灰色在下，黄色在上，默认平铺五颗灰色和黄色星星，然后从传入的评分来控制黄色星星的底部视图的宽度，而不是控制星星的样式，黄色和灰色星星从一开始到最后都没有变化，变化的只是放置星星的View的frame在变化。 RatingView.h 为外部使用该类提供一个属性，传入星星的评分，供展示使用。 @property(assign,nonatomi
react通过组件实现星星评价（小白可看）
weixin_45381828的博客
08-09 1357
封装组件并传值 可用propstype 先定义一个组件使用export default 来抛出组件 在主页面使用import 变量 from ‘地址’来引入 直接在主页面调用定义名称，比如首字母按组件要求大写，可以小写，但不推荐 然后在中直接加入传递的数据 封装的Discuss组件 使用this.props来获取组件传递过来的数据（ 可以添加到this.state中） 6.数据以及获取到了可...
评分算法(五星好评为例-vue)
Machangzhi_1115的博客
04-22 4265
整体思路就是把所有的亮星,半星以及暗星放进一个数组 一般的评分后台仅仅只是返回一个数据,需要我们处理这个数据之后在前台显示出来图形化的星星. 首先定义常量: //星星的最大长度 const LENGTH = 5 //亮星 const CLS_ON = 'on' //半星 const CLS_HALF = 'half' //暗星 const CLS_OFF = 'of...
详解VUE里子组件如何获取父组件动态变化的值
10-17
本篇文章将详细介绍如何在 Vue 中让子组件获取并响应父组件动态变化的值。 首先，子组件通过 `props` 从父组件接收数据。在子组件的定义中，我们需要声明预期接收的 props。例如，如果我们有一个名为 `SwitchButton...
VUE 组件转换为微信小程序组件的方法
10-16
- **赋值语句和表达式**：Vue组件中的响应式数据绑定在AST中可被识别并转换为小程序的属性绑定语法。 - **组件的内部数据**：Vue的`props`和`computed`属性需要转换为小程序的`properties`和计算逻辑。 - **组件...
vue 父组件通过$refs获取子组件的值和方法详解
10-16
总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...
vue小组件 计算器小工具
02-09
vue小组件 计算器小工具
vue中子组件的methods中获取到props中的值方法
10-18
在Vue.js中，父子组件之间的...如果`prop`的值是异步获取的，可以通过在子组件中创建一个`watch`来监听变化，并在变化发生时执行相应逻辑。这样可以确保即使在数据延迟加载的情况下，子组件也能正确响应父组件的更新。
淘宝评价的五角星效果功能
08-20
淘宝评价的五角星效果功能, 淘宝评价效果功能，html原形
vue星星评分组件_一个简单且高度可定制的Vue星级评分组件
cuk5239的博客
07-26 2565
vue星星评分组件 Vue 2.x的星级评定组件 (Star Rating Component for Vue 2.x) Need more than stars? Check out vue-rate-it with hundreds of different raters built in! 需要更多星星吗？ 查看vue-rate-it，其中内置了数百种不同的评估者！ A simple, ...
数据结构（第四章）
JT518721的博客
02-20 218
树中 一.二叉搜索树（BST，Binary Search Tree） 二叉搜索树也称二叉排序树（因为它有一定的顺序在里面）或二叉查找树（因为里面的某些规律方便查找），可以为空。 不为空时的性质： 非空左子树的所有键值小于其根结点的键值； 非空右子树的所有键值大于其根结点的键值； 左，右子树都是二叉搜索树。 既然叫二叉查找树，那我们就来看看它的查找吧！ 二叉搜索树的查找 查找过程：我们先从根结点开始...
Vue相关开源项目库汇总(史上最全)
热门推荐
腾讯全栈-ITCJF
10-13 3万+
目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★
vue 星星(共5分)评分
周家大小姐
05-07 3879
项目里的星星不是UI图是font awesome字体图标 <template> <div class="Rating-gray"> <i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i> </div> <...
vue实现一个星级打分效果_vue 实现的评分小星星组件，包括半星
weixin_39815600的博客
12-22 906
一：实现的思路：通过评分的分数，来算出高亮的全星有几颗，有没有半星，灰色星星有几颗，通过背景图片实现，例如：评分 ： 4.6 分四舍五入计算把分数换算成0.5的倍数：Math.floor( 4.6 *2 ) / 2 等于 4.5把星星放到数组 arr_star 里面：是否需要半星 var half = 4.5 % 1 != 0 ? true :false //能被1取余整数的话就不需...
vue中实现星星评分组件
simoon's的博客
06-20 6676
以下代码做记录： &lt;template&gt; &lt;div class="star" :class="starSize"&gt; &lt;div v-for="(starType, index) in itemClasses" :key="index" class="star-item" :class="starType"&
vue实现评价星星功能（代码全）
boy火巨的博客
06-26 5544
代码： <template> <ul class="StarsWrap"> <li v-for="(i,index) in list" :key="index" @click="clickStars(index)"> <img :src="xing>index?stara:starb"/&...
vue子组件获取父组件值
最新发布
07-28
在Vue中，子组件可以通过props属性获取父组件传递的值。以下是一个简单的例子： ```vue 父组件值：{{ parentValue }} <child-component :childProp="parentValue"></child-component> import Child...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值