Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.