当前位置: 首页 > news >正文

vue实现商品评分效果(通过插件实现)

Vue.js 实现了一个简单的商品评分功能。用户可以通过点击星星来修改商品的评分,并且评分显示了相应的星星数。

废话不多说,直接上代码

方法一:
<template><div><avue-form :model="formData"><avue-form-item label="商品评分" prop="status_id"><avue-rate v-model="formData.status_id" :show-text="true" :text-color="'#ff9900'"></avue-rate></avue-form-item></avue-form></div>
</template><script>
export default {data() {return {formData: {status_id: 0, // 初始评分为0},};},
};
</script>

方法二:

<template><div><div><label>商品评分:</label><span>{{status_id}}</span><ul class="rating"><li v-for="n in 5" :key="n" :class="{ 'filled': n <= status_id }" @click="updateRating(n)">&#9733;</li></ul></div></div>
</template><script>
export default {data() {return {status_id: 0, // 初始评分为0};},methods: {updateRating(rating) {this.status_id = rating;},},
};
</script><style>
.rating {list-style-type: none;padding: 0;
}.rating li {display: inline;padding: 5px;font-size: 24px;cursor: pointer;
}.rating li.filled {color: orange;
}
</style>

相关文章:

vue实现商品评分效果(通过插件实现)

Vue.js 实现了一个简单的商品评分功能。用户可以通过点击星星来修改商品的评分&#xff0c;并且评分显示了相应的星星数。 废话不多说&#xff0c;直接上代码 方法一&#xff1a; <template><div><avue-form :model"formData"><avue-form-it…...

SpringBoot 手写 Starter

spring-boot-starter 模块 1.介绍 SpringBoot中的starter是一种非常重要的机制&#xff0c;能够抛弃以前繁杂的配置&#xff0c;将其统一集成进starter&#xff0c;应用者只需要在maven中引入starter依赖&#xff0c;SpringBoot就能自动扫描到要加载的信息并启动相应的默认配…...

C++ 学习笔记(Structured bindings)

C 学习笔记&#xff08;Structured bindings&#xff09; 这个特性是 C17 引入的&#xff0c;个人认为主要是解决如何让函数返回多个值的问题。在这之前&#xff0c;我们一般用 std::pair 或者 std::tuple 来返回多个值。比如下面的例子&#xff1a; std::tuple<int, int …...

K8S常用kubectl命令汇总(持续更新中)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

加密和签名的区别及应用场景

原文网址&#xff1a;加密和签名的区别及应用场景_IT利刃出鞘的博客-CSDN博客 简介 本文介绍加密和签名的区别及应用场景。 RSA是一种非对称加密算法&#xff0c; 可生成一对密钥&#xff08;私钥和公钥&#xff09;。&#xff08;RSA可以同时支持加密和签名&#xff09;。 …...

双非二本找实习前的准备day3

学习目标&#xff1a; 每天2-3到简单sql&#xff08;刷完即止&#xff09;&#xff0c;每天复习代码随想录上的题目3道算法&#xff08;时间充足可以继续&#xff09;&#xff0c;背诵的八股的问题也在这里记录了 今日碎碎念&#xff1a; 1&#xff09;偶尔还是贪玩游戏&…...

又挖到宝了!国人团队研发的AI视频工具PixVerse,这么好用居然还完全免费!(强烈推荐)

昨天发了一款国产免费的 AI 绘画工具 Dreamina 的介绍&#xff1a; 居然才发现&#xff01;字节跳动旗下国产AI绘画工具Dreamina&#xff0c;这么好用居然还免费&#xff01;&#xff08;强烈推荐&#xff09; 发现大家对国产 AI 工具还挺感兴趣的。今天继续帮大家挖国产的 A…...

勒索病毒普通用户防范建议

勒索病毒普通用户防范建议 定期备份存储在计算机上的数据&#xff0c;这样勒索软件感染不会永远破坏您的个人数据。 最好创建两个备份副本&#xff1a;一个存储在云中&#xff08;记住使用一个自动备份文件的服务&#xff09;&#xff0c;另一个物理存储&#xff08;便携式硬…...

Zabbix“专家坐诊”第231期问答

问题一 Q&#xff1a;用docker-compose部署zabbix&#xff0c;部署完后如果要修改zabbix的配置应该要改docker-compose文件里的环境变量吧&#xff1f;改了环境变量之后只能重建容器才能生效吗&#xff1f;能不能在不影响已经配好的那些监控项的情况下让新的环境变量生效&#…...

【.NET Core】深入理解IO - FileSteam流

【.NET Core】深入理解IO - FileSteam流 文章目录 【.NET Core】深入理解IO - FileSteam流一、IO流概述二、文件流FileStream2.1 FileStream概述2.2 FileStream检测流位置更改2.3 FileStream构造函数2.4 FileStream常用属性2.5 FileStream.Read方法2.6 FileStream.Write方法2.7…...

CentOS7 Mysql 忘记密码或临时密码进不去时怎么跳过密码进去然后再更改密码

CentOS7 Mysql 忘记密码或临时密码进不去时怎么跳过密码进去然后再更改密码 1、进文件 vi /etc/my.cnf2、加skip-grant-tables设置跳过密码 在[mysqld]下面加 skip-grant-tables3、mysql -u root -p直接回车无密码进去mysql mysql -u root -p3、先更新&#xff0c;不执行这…...

深度学习 精选笔记(8)梯度消失和梯度爆炸

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)&#xff0c;以达到集多方教程的精华于一文的目的。 ③非常推荐上面&#xff08;学习参考&#x…...

linux操作docker

docker地址 官方地址 centos7安装docker 卸载旧版本docker sudo //在前面表示以管理员权限操作yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine安装docker //安装所需资…...

k8s Pod 进阶(资源限制,健康检查探针详解,启动退出,pod生命周期,)

目录 资源限制 查看资源控制字段 Pod 资源限制方式 Pod 和容器中定义资源请求和限制的具体字段 CPU资源单位 内存资源单位 示例 健康检查&#xff08;探针&#xff09; 探针的三种规则 存活探针&#xff08;Liveness Probe&#xff09; 就绪探针&#xff08;Readines…...

SpringBoot整合ActiveMQ步骤

SpringBoot整合ActiveMQ主要涉及以下几个步骤&#xff1a; 添加依赖&#xff1a;在SpringBoot项目的pom.xml文件中添加ActiveMQ的依赖。 <dependency><groupId>org.apache.activemq</groupId><artifactId>activemq-spring</artifactId><ver…...

MySQL的单表和多表查询

我们在前面曾构建过三个用于实验的表格&#xff0c;下面将基于这三个表进行实践。 # 建立一个用于实验的三个表格 mysql> create table emp (-> empno varchar(10),-> ename varchar(50),-> job varchar(50),-> mgr int,-> hiredate timestamp,-&…...

攻防世界例题wp

1.看到_wakeup()函数第一反应要么触发&#xff0c;要么绕过在这里绕过 2.构造payload实例化一个对象后反序列化 3构造脚本如下&#xff1a; 4.因为它是一个绕过的方法所以我们要使用绕过的方法。 5.继续构造payload将上图的1换成2进行绕过 最终的payload为 O:4:"xctf…...

仿牛客网项目---显示评论和添加评论功能的实现

这篇文章&#xff0c;我来介绍一下我的项目中的另外一个功能&#xff1a;显示评论和添加评论。 其实这两个功能都不怎么重要&#xff0c;我感觉最重要的应该是用户注册登录功能&#xff0c;这个也了解一下&#xff0c;知道这么一回事儿就好。 首先设计DAO层。 Mapper public …...

idea集成git详解教程(实用篇)

0.Git常用命令 Git常用命令-CSDN博客 1.下载git Git - Downloads 一路傻瓜式安装即可&#xff08;NEXT&#xff09; 2.软件测试 在Windows桌面空白处&#xff0c;点击鼠标右键&#xff0c;弹出右键菜单 Git软件安装后&#xff0c;会在右键菜单中增加两个菜单 Git GUI He…...

搭建LNMP环境并配置个人博客系统

LNMP是Linux&#xff08;操作系统&#xff09;、Nginx&#xff08;Web服务器&#xff09;、MySQL&#xff08;数据库&#xff09;和PHP&#xff08;脚本解释器&#xff09;的组合&#xff0c;常用于部署高性能的动态网站&#xff0c;如WordPress等博客平台 一、安装Linux操作系…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...