vue.js

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

create star rating using vuejs and css

417

<html>
<head>
<title>VueJs</title>
<script type = "text/javascript" src = "https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script type = "text/javascript" src = "https://unpkg.com/vue-star-rating@1.7.0/dist/VueStarRating.umd.min.js"></script>
<link rel="stylesheet" href="/project/xPeterx/sl_iv7uZllK2q202122274/file.css">
</head>

<body>

<div id="app">

<h2>Star Rating</h2>
<star-rating></star-rating>

</div>

<script type = "text/javascript">

Vue.component('star-rating', VueStarRating.default)

new Vue({
el: '#app',
methods: {
setRating: function(rating) {
this.rating = "You have Selected: " + rating + " stars";
},
showCurrentRating: function(rating) {
this.currentRating = (rating === 0) ? this.currentSelectedRating : "Click to select " + rating + " stars"
},
setCurrentSelectedRating: function(rating) {
this.currentSelectedRating = "You have Selected: " + rating + " stars";
}
},
data: {
rating: "No Rating Selected",
currentRating: "No Rating",
currentSelectedRating: "No Current Rating",
boundRating: 3,
}
});

</script>

</body>

</html>