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

This article introduces the relevant knowledge of "what is the method of vue using computational attributes to complete the production of dynamic slider bars?" in the operation of actual cases, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Layout section:

Emotional level: {{val}}% {{getHappiness}}

Style section:

* {padding: 0; margin: 0; list-style: none;}: root {/ * global css variable * /-yellow: # ffd100;-- orange: # ff6a13;-- darkGray: # 53565a;-- midGray: # 888b8d;-- white: # fff;} *, *: after,*::before {color: var (--darkGray); box-sizing: border-box } html,body {width: 100%; height: 100%;} body {min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var (--white);} # slider {/ * Local css variable * /-- roundness: 20px; width: 100%; max-width: 600px; outline: 1px dashed red; padding: 4vh / * Grid layout * / display: grid; justify-content: stretch;} # slider > label {width: 100%; font-size: 1.5mm; padding: 00 0.5mm; margin: auto;} # slider input {grid-row: 2 / 3; grid-column: 1 / 2; width: 100%; position: relative; z-index: 1; opacity: 0 Height: calc (var (--roundness) * 2); cursor: pointer;} # slider .outer {width: 100%; height: var (--roundness); background-color: var (--midGray); border-radius: var (--roundness); display: flex; align-items: center; align-content: center; position: relative; z-index: 0; margin: auto; grid-row: 2Unip 3 Grid-column: 1background 2;} # slider input:focus + .outer {outline: 1px dashed var (--orange);} # slider label.inner {position: absolute; width: 100%; height: 100%; background: var (--white); background: linear-gradient (to left, var (--yellow), var (--orange)); border-top-left-radius: var (--roundness)! important Border-bottom-left-radius: var (--roundness)! important; position: absolute; transition: all 0.3s cubic-bezier (0.5,0.4,0.2,1); text-align: right; font-size: calc (var (--roundness) * 2); line-height: 1;} # slider label.inner span {position: absolute; right:-2px Top: calc (50-var (--roundness) * 2); top: calc (var (--roundness) *-.3); transition: inherit;}

Vue section:

Let a = new Vue ({el: "# slider", data () {return {val: 70, / / key points, also used to dynamically correlate 1: emotional percentage 2: text emoticons displayed}}, mounted () {this.val = Math.floor (Math.random () * 101l)}, computed: {getPlacement: function () {return `$ {(- 0.009 * ((this.val *-1) + 104))} em` / / get the location. Because it is a computational attribute, it is equivalent to binding with val. Binding to the bottom span is equal to "binding" with the width bound to val above. GreaterThanFifty: function () {return this.val > 50? `var (--roundness) `: `0` / / when the val value is greater than 50, the change of the border can be omitted or unbound, not critical}, getHappinessColor: function () {return `rgba (255,$ {106 + (103100 * this.val)}, ${(Math.floor (this.val *-1 / 7.692)) + 13} ` / / function to get the color. You can change the value at will, but the color transition above is more natural}, getHappiness: function () {let mood / / physically bind val values to all emoticons if (this.val = = 0) {mood = "??"} else if (this.val < 10) {mood = "??"} else if (this.val < 20) {mood = "? ?? "} else if (this.val < 30) {mood ="? "} else if (this.val < 40) {mood =" ☹️ "} else if (this.val < 50) {mood ="?? "} else if (this.val < 60) {mood = "?"} else if (this.val < 70) {mood = "?"} else if (this.val < 80) {mood = "?"} else if (this.val < 90) {mood = "? } else if (this.val < 100) {mood = "?"} else if (this.val = = 100) {mood = "??"} return mood }) this is the end of the content of "what is the method that vue uses computational properties to make dynamic slider bars". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.