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

Editor to share with you how vuejs changes css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Vuejs changes the css method: 1, use "v-bind:class" or "v-bind:style" instruction to modify the css style; 2, directly through the operation of dom to change the css style.

This article operating environment: Windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs change css?

Detailed explanation of the operation (modification) of css in Vue.js

Use v-bind:class or v-bind:style or directly manipulate dom to change its style

1.v-bind:class | | v-bind:style

Where v-bind is the instruction, the following class and style are parameters, and the reference after class is called "instruction expected value" in the official document of vue (this is needless to go into, anyway, I think it would be useful for beginners to know his name) like most instructions of v-bind (except some special instructions such as V-for), in addition to binding variables of string type, it also supports a single js expression. In other words, the 'instruction expected value' of v-bind:class can also be an object or an array in addition to a string (the v-bind in 'vmurbind' can be omitted).

1.1: object syntax:

Bind vtalk binding via object class= "{'css class name': controls whether to display (true or false)}"

1.1 my object changes & & bind test

Export default {name: 'mytest', data () {return {display: true}}, mounted () {}, computed: {}, methods: {}} .colordisplay {display: inline; background: red; border: 1px solid blue}

If display is true, then the class of this part is class= "mycolor colordisplay". You can control the display of colordisplay by setting the value of display.

If you want to bind multiple class, you can separate it with a comma like a normal object key value pair.

1.2: inline style:

VMustbindPUD stylecolored colors'

Template

1.2 my style inline changes & & bind test

Data

Mypagestyle: {color: 'yellow',background: "blue"}

1.3: array syntax:

You can also bind vtalk bindvir stylekeeper'[mycolor1,mycolor2] 'through an array

1.3My array changes & & bind test

Then set the returned data to

Myarr: {color: 'white'}, myarrtest: {background:'#000',display:'inline'}

two。 Calculation attribute

You can also calculate styles by calculating attributes (suitable for more complex judgments).

two。 Calculation attribute judgment

Take the return value of the calculated attribute as the class name, and control whether the style is displayed or not by judging the values of serd and slid.

Data () {return {serd:true,slid:true}}, computed: {compuretu: function () {return {compuretu: this.serd & & this.slid}}}

Set styl

.compuretu {color:white;background: red}

3. Operation node

Because vue itself is a virtual dom, there may be an error of 'style' is not definde' when changing the node style through document.

The solution to this problem requires a higher understanding of vue, which can change the style by getting the style with ref and $refs in the periodic mounted function of vue itself: the example is as follows:

My test

Export default {name: 'mytest',data () {return {}}, mounted () {console.log (this.$refs.abc.style.cssText)}}

Description:

1.ref is used to register reference information for elements (subcomponents)

2.vm.$refs an object that holds all subcomponents (or HTML elements) that have been registered with ref

Use: in the HTML element, add the ref attribute, and then in JS through vm.$refs. Property to get the

The above will output all the contents of style (color: green;)

In this way, changes can be made to the corresponding properties directly (this.$refs.abc.style.color=red)

Test of my single class attribute

1.1 my object changes & & bind test

1.3My style inline changes & & bind test

1.3My array changes & & bind test

two。 Calculation attribute judgment

3. My dom changes test

Export default {name: 'mytest', data () {return {serd:true, slid:true, mycss: {color:'}, mypagestyle: {color: 'yellow', background: "blue"}, myarr: {color:' white'}, myarrtest: {background:'#000', display:'inline'}, display: true}} Mounted () {console.log (this.$refs.abc.style.cssText) this.$refs.abc.style.color = 'red' / / modify attribute this.$refs.abc.style.background =' black' / / add attribute this.$refs.abc.style.display = 'inline' console.log (111l) console.log (this.$refs.abc.style.display)}, computed: {compuretu: function () {return {compuretu: this.serd & & this.slid} Methods: {}} .mycss {color: blue} .colordisplay {display: inline Background: red; border: 1px solid blue} .mycolor {color: orange} .computed {border: 1px solid yellow} .compuretu {color:white; background: red;} these are all the contents of the article "how vuejs changes css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.