How to achieve Taobao-like star rating in vue
Below I will share with you an example of using vue to implement a Taobao star rating. It has a good reference value and I hope it will be helpful to everyone.
The example is as follows:
<template>
<p
id="shoplist">
<p
class="all"
>
<input
type="radio"
name="b"
value="0" v-model="inputdata"/>
<span>★</span>
<input
type="radio"
name="b"
value="1" v-model="inputdata" />
<span>★</span>
<input
type="radio"
name="b"
value="2" v-model="inputdata" />
<span>★</span>
<input
type="radio"
name="b"
value="3" v-model="inputdata" />
<span>★</span>
<input
type="radio"
name="b"
value="4" v-model="inputdata" />
<span>★</span>
<input
type="radio"
name="b"
value="5" v-model="inputdata" />
<span>★</span>
</p>
</p>
</template>
<script>
export default {
name:'shoplist',
data(){
return {
inputdata:'5'
}
},
methods:{
},
watch: {
inputdata(value) {
console.log(value)
}
}
}
</script>
<style>
.all>input{opacity:0;position:absolute;width:2em;height:2em;margin:0;}
.all>input:nth-of-type(1),
.all>span:nth-of-type(1){display:none;}
.all>span{font-size:2em;color:gold;
-webkit-transition:color
.2s;
transition:color
.2s;
}
.all>input:checked~span{color:#666;}
.all>input:checked+span{color:gold;}
</style>The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.
Related articles:
The vue page switches to the scroll page to display the top example_vue.js
Let’s talk about JS Usage of animation library Velocity.js
vue filter filter instance detailed explanation
The above is the detailed content of How to achieve Taobao-like star rating in vue. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
I used AI to write two essay topics for this year's college entrance examination. Let's see how they scored.
Jun 08, 2023 am 11:48 AM
I used AI to write two essay topics for this year’s college entrance examination. Let’s see how they scored. #IfAIComes to Write College Entrance Examination Essays# The college entrance examination essay questions have come out. Some people say that they are easier than last year, and some people say that the questions are very hot topics, but we won’t talk about these today, we are going to do something new. During this period, AI technology is very popular, and many people have a new understanding of artificial intelligence. Then I will use AI to write the essay questions for this college entrance examination. Due to limited time and space, I can only make excerpts. I will only read the beginning of these articles for everyone to see. Let's see how many points everyone can give. The title of the National Paper A essay is: People have better control over time due to technological development, but some people have become servants of time. What associations and thoughts does this sentence trigger in you? Please write an article. Look at AI
Microsoft introduces app ratings and reviews for Microsoft Teams apps
Nov 08, 2023 pm 11:21 PM
Apps in Microsoft Teams extend Teams functionality on mobile and desktop. Microsoft Teams applications are similar to web-based SaaS applications, do not need to be installed locally, and can only work within the allowed scope. There are more than 2,000 apps in the Microsoft Teams store, some of which are very popular. Collaboration apps from Adobe, Atlassian and Workday have more than 10,000 monthly active users on Teams. Yesterday, Microsoft announced that it is introducing ratings and reviews to the Microsoft Teams app. Not only does this help users choose apps that suit their purposes, but it also allows developers
How do you rate Douban? Douban effective rating tutorial!
Mar 16, 2024 am 08:31 AM
1. How to rate Douban? Douban effective rating tutorial! 1. Open the Douban app downloaded and installed from this site, and click on the menu at the bottom of the homepage to select books and videos. 2. Enter the work we want to evaluate in the search box. 3. After entering the work details page, click on the rating box. 4. After jumping to the page, give a rating according to your preferences and click the OK button. 5. Finally, the scoring success page pops up to remind us that the scoring is successful.
How to delete Hupu ratings
Feb 23, 2024 pm 02:52 PM
How to delete Hupu ratings? The Hupu platform will comment on favorite content, but most friends don’t know how to delete Hupu ratings quickly. Next is the picture of how to delete Hupu ratings brought by the editor to players. Tutorial, interested players come and take a look! How to delete Hupu ratings 1. First open the Hupu APP, go to the main page and click the [Rating] area at the bottom; 2. Then on the area page as shown below, click [Rating] under the avatar; 3. Finally, in Click [Rating] as shown by the arrow in the figure below, and click [Delete Rating] in the window.
PHP mall development skills: Design rating and comment management functions
Jul 29, 2023 am 08:52 AM
PHP mall development skills: Design rating and comment management functions Introduction: With the rapid development of the Internet, e-commerce has become one of the main ways for people to shop. In order to attract more users, the mall website must provide complete rating and comment management functions so that users can evaluate products and other users can view and refer to these evaluations. This article will introduce how to use the rating and review management functions of PHP Developer City, and attach a working example. 1. Database design: First, we need to design a database to store products
PHP and XML: How to implement online exams and grading
Aug 07, 2023 pm 12:34 PM
PHP and XML: How to implement online examinations and scoring In modern education, more and more schools and training institutions choose online examinations for assessment and scoring. PHP, as a widely used server-side scripting language, combined with XML structured data, can easily implement online exams and scoring systems. This article will introduce how to use PHP and XML to create a simple online exam and scoring system, and provide relevant code examples. First, we need to create an XML file containing all the questions and answers. The following is a
How to use PHP Developer City to implement user rating function
Jun 30, 2023 pm 02:03 PM
How to use PHP Developer City to implement user rating function With the rapid development of e-commerce, shopping websites have become the main channel for people to purchase goods. In order to provide a better shopping experience, the mall website has introduced a user rating function. Through user ratings, consumers can evaluate the quality, price, service, etc. of the product, thereby providing a reference for other consumers. This article will introduce how to use PHP Developer City to implement the user rating function. 1. Database design Before developing the user rating function of the city, you first need to design the data related to the rating.
Rating and comment implementation method developed in PHP in WeChat mini program
Jun 01, 2023 am 09:32 AM
With the popularity and development of WeChat mini programs, more and more companies and developers have begun to use WeChat mini programs to build their own applications, and one of the essential functions is the rating and comment function. This article will introduce the implementation method of ratings and comments developed in WeChat applet using PHP. First, we need to clarify the implementation principles of the two functions of rating and commenting. The rating function can be understood as a user rating a product or service and recording the score for reference by other users. The comment function allows users to comment on a product or
