How to use vue to achieve star score with decimal point
How to use vue to achieve star score with decimal point, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.
First, we need to introduce the vue.js file.
Css part
Main {position:relative;} .star _ line {/ * set no line wrapping * / width-space: nowrap; overflow: hidden; position: absolute;} .star {display: inline-block; / * when the mouse is over a star, it becomes a small hand style * / cursor: pointer}
Body part
In the js part, we use components, input is in the root component, and the stars we create are placed in a component, mainly through two-way binding, and the parent component and child components pass values to each other to achieve star scoring.
Component template part
☆ ★
Js part
Vue.component ("v-star", {template: "# v-star", props: {total: {default:10,}, size: {default:30}, / / receive score value: {}} from the parent component / / calculation attribute computed: {mainStyle () {return {width:this.size * this.total + "px",}}, starStyle () {return {width:this.size + "px" Height:this.size + "px", fontSize: this.size + 6 + "px"}}, blackStyle () {return {width:this.value / this.total * 100 + "%"} Methods: {changeValue (value) {/ / pass the latest result to the input / / input tag with a default input event this.$emit ("input", value)}) new Vue ({el: "# app" Data: {score:1}})
Effect picture
Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.
