vue动态设置width实现星级打分展示

最新推荐文章于 2025-06-13 12:26:53 发布

芒果二十

最新推荐文章于 2025-06-13 12:26:53 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 星级打分进度条

本文链接：https://blog.youkuaiyun.com/weixin_42840237/article/details/81297111

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS和HTML实现动态星级展示的方法，通过控制外层div的宽度来展示不同数量的星星图标，适用于产品评分等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这种实现方法本质是通过对外层div宽度的控制，使用超出隐藏的方式实现对应星星个数的展示。

实现代码：

<div class="star" :style="'width:' + level * .48 + 'rem'">
    <img src="../assets/images/star.png" alt="">
</div>

img中需包含5颗星，外层div的overflow属性需要设置为hidden，其中level为星级，即需要展示的星星个数，.48为一个星星的宽度（这里使用的宽度单位是rem）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

芒果二十

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

动态修改 Vue 类的宽度

CyberLynxX的博客

09-26

397

通过上述代码，我们实现了在 Vue 中动态修改类的宽度。通过使用动态绑定语法和计算属性，我们可以根据数据的变化来实时更新类和样式，实现更灵活的界面效果。在 Vue 中，我们可以使用动态绑定来修改元素的类和样式。如果你想要通过编程的方式给一个类增加宽度，你可以使用 Vue 的绑定语法和计算属性来实现。首先，我们需要在 Vue 实例中定义一个数据属性，用于控制类的宽度。属性的值返回一个布尔值，用于判断是否添加宽度增加的类。绑定语法来绑定类，并使用计算属性来动态计算类的宽度。的值来判断是否添加宽度增加的类。

Vue2 实战：实现评价页面的星级评分、文字计数与图片上传功能」「完整示例：用 Vue2 搭建一个用户评价表单页面，适合前端初学者」「从零开始，用 Vue2 构建一个用户评价页面，含动态评分和进度

南北极之间

11-12

589

Vue2 实战：实现评价页面的星级评分、文字计数与图片上传功能」「完整示例：用 Vue2 搭建一个用户评价表单页面，适合前端初学者」「从零开始，用 Vue2 构建一个用户评价页面，含动态评分和进度条」Vue2 实战：实现评价页面的星级评分、文字计数与图片上传功能」「完整示例：用 Vue2 搭建一个用户评价表单页面，适合前端初学者」「从零开始，用 Vue2 构建一个用户评价页面，含动态评分和进度条」Vue2 实战：实现评价页面的星级评分、文字计数与图片上传功能」「完整示例：用 Vue2 搭建一个用户

参与评论您还未登录，请先登录后发表或查看评论

Vue动态获取width

最新发布

BillKu的博客

06-13

1096

{ prop: 'email', label: '邮箱', width: loadWidth('email', 200) }{ prop: 'name', label: '姓名', width: loadWidth('name', 120) },{ prop: 'age', label: '年龄', width: loadWidth('age', 80) },<el-button @click="resizeColumn">调整第一列宽度</el-button>-- 固定布局模式下宽度分配更精确 -->

vue中星级判断函数

weixin_30498921的博客

04-09

226

完整代码： <template> 　　<div> 　　　<div class="rate"> 　　　　　<p>星级：</p> 　　　　　<div class="star" v-for="(item,index) in stars" :key="index" @click="rating(index)"> 　　　...

vue中宽度动态设置的几种常用方法

weixin_45155922的博客

12-06

4066

我们可以使用resize事件，来动态的实时获取界面宽度，再把根据这个div与设计稿的比例，动态的设置宽度。通过addEventListener，把事件添加到了window上，当当前组件不用时，需要在onUnmounted中，将该事件销毁，节约资源。二、今天在使用vant组件进行开发时，vant组件中swipe中的宽度设置，只能接受px。一.一种常见的是使用vw的方式设置宽度，这样当我们的屏幕发生变化时，可以跟着动态的修改。场景：当我们在项目开发中，有时候某个宽度，需要根据界面当前的宽度动态设置。

vue 表格电话加星显示，悬浮显示详情

m0_60330965的博客

09-24

424

<el-table-column :show-overflow-tooltip="true" prop="callTelephone" ...

uni-app+iconfont 实现星级评分（vue）

qq_38170252的博客

07-08

6629

效果图需求点击星星进行评分，若评分低于三星，则展示问题原因，星级评分多少则高亮几颗星，所有选项均为必选项，评分完成后可提交表单，并把问题、星级分数、原因传给后台。因需求原因先做了星星组件的组件，其实可以将问题、星星、备注原因整合成一个组件，这里就主要记录星星评分组件的实现。 1. uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可...

VUE：实现星级评价，以VUE举例

干饭搬砖两不误。

03-26

1296

简介在很多项目中，需要用到对商品、订单、服务等的评价功能，其中使用星级评价是一种快捷表现满意度的体现。接下来以VUE项目环境列举一个实例。具体样式的话，需要自己根据项目实际情况进行修改。具体实现 // HTML <div class="flexRowStartCenter effectAndAttitudeBox"> <div class="standardTitle"&...

vue实现一个星级打分效果_vue 星星评分组件

05-16

下面是一个简单的 Vue 星级评分组件的实现： ```html (star, index) in stars" :class="['star', star]" :key="index" @click="select(index)"> export default { props: { value: { type: Number...

vue-input-autowidth:Vue.js指令，用于调整文本输入的宽度以适合其内容

05-02

Vue输入自动宽度 Vue.js指令，用于调整文本输入的宽度以适合其内容。安装 $ yarn add vue-input-autowidth 或者 $ npm install --save vue-input-autowidth 也可以在Unpkg上使用： ://unpkg.com/vue-input-autowidth 用法 import VueInputAutowidth from 'vue-input-autowidth' Vue . use ( VueInputAutowidth ) // and in your template... < input type = "text" v - autowidth = "{maxWidth: '960px', minWidth: '20px', comfortZone: 0}" v - model = "name"

Vue动态获取width的方法

10-18

今天小编就为大家分享一篇Vue动态获取width的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue.js 中如何手动设置元素的宽度和高度

ByteWhisper的博客

09-25

1241

这两种方法都可以手动设置元素的宽度和高度。如果你需要根据组件的状态或动态数据来设置宽度和高度，使用绑定样式对象的方法会更加灵活和方便。另一种设置元素宽度和高度的方法是使用绑定样式对象。我们可以在 Vue 组件中定义一个 data 属性，包含需要设置的宽度和高度的值，然后通过绑定样式对象将这些值应用到元素上。在 Vue.js 中，我们可以通过使用内联样式或者绑定样式对象来手动设置元素的宽度和高度。使用内联样式是一种简单的设置元素宽度和高度的方法。的数据属性，它是一个包含宽度、高度和背景颜色的样式对象。

for循环显示星星个数

m0_46406735的博客

07-21

380

vue 全局样式指令

weixin_43934420的博客

04-23

472

styles.js导出样式指令 // 样式指令 const styles = { // 设置元素的框类型 display: { inserted: (el, binding) => { el.style.display = binding.value }, update: (el, binding) => { el.style.display = binding.value } }, // 设置元素宽度 width: {

[vue] Vue绑定class样式

qq_14993591的博客

11-03

564

1. class样式写法:class=“xxx” xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。字符串写法适用于：类名不确定，要动态获取。 .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red;;

有关Vue、微信小程序、UniApp中的CSS中的宽度width单位、自适应

番茄Salad

11-22

2839

需要注意的是，在小程序中使用单位时，无需手动转换为实际像素值，小程序会自动根据屏幕密度进行换算。在小程序中设置宽度，无需手动换算为不同屏幕密度下的像素值。在小程序和UniApp开发中，推荐使用rpx单位来设置宽度和其他尺寸相关的样式。rpx单位可以实现在不同屏幕大小下的自适应效果，使页面在不同设备上呈现一致的布局和比例。）：类似于em，但是相对于字体中特定字符的高度或宽度。ex相对于小写字母x的高度，ch相对于数字0的宽度。需要根据具体情况选择合适的单位来设置宽度，以实现所需的效果。

Vue 基础知识

HUSBANDL的博客

12-11

350

简介 vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom vue模板 <script src="vue.js"></script> </head> <body> <div id="app">{{ name }}</div> <script> var vue

Vue基本格式及常用V-指令

chijiajing的博客

09-19

6257

目录常用指令例子v-on:click v-model(双向绑定，即其中一方改变值，另一方也随之改变) 例子2: v-show v-for v-bind(绑定元素)其中一种写法获得当前点击对象 v-for渲染填充值，并通过click动态改变样式例子 <!DOCTYPE html> <html lang="en"> <head> &l...