How to change css in vuejs

How to change css in vuejs: 1. Use the "v-bind:class" or "v-bind:style" command to modify the css style; 2. Change the css style directly by operating the dom.

The operating environment of this article: Windows 7 system, vue version 2.9.6, DELL G3 computer.

How to change css in vuejs?

Detailed explanation of how to operate (modify) css in Vue.js

Use v-bind:class or v-bind:style or directly pass Operate dom to change its style;

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

where v-bind is the instruction, followed by : The class and style are parameters, and the pointer after class is called the 'instruction expected value' in the official documentation of vue (there is no need to go into this, anyway, I think it is useful for beginners to know its name). Same as v- Like most instructions of bind (except for some special instructions such as V-for), in addition to binding string type variables, it also supports a single js expression, that is to say, the expected value of v-bind:class' instruction 'In addition to strings, it can also be an object or array (v-bind in 'v-bind:' can be omitted).

1.1: Object syntax:

Bind v-bind through objects: class="{'css class name': control whether to display (true or false)}"

<template>
 <p>
 <p class=&#39;mycolor&#39; :class="{&#39;colordisplay&#39;:display}"><span>1.1我的对象更改&&绑定test</span></p>
 </p>
</template>
<script>
 export default {
 name: &#39;mytest&#39;,
 data() {
 return {
 display: true
 }
 },
 mounted() {},
 computed: {},
 methods:{}
 }
</script>
<style>
 .colordisplay {
 display: inline;
 background: red;
 border: 1px solid blue
 }
</style>

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 set the binding If you specify multiple classes, just separate them with commas like normal object key-value pairs.v-bind:class="{'colordisplay':display,'ispay':pay}"

1.2: Inline style:

v-bind:style='mycolor'

template

<p :style=&#39;mypagestyle&#39;><span>1.2我的样式内联更改&&绑定test</span></p>

data

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

1.3: Array syntax:

can also be bound through an array v-bind:style='[mycolor1,mycolor2]'

<p :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></p>

Then set The returned data is

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

2. Calculated properties

can also be calculated through calculated properties (suitable for more complex judgments) style

<p class=&#39;computed&#39; :class=&#39;compuretu&#39;>2.计算属性判断</p>

The return value of the attribute is used as the class name, and the display of the style is controlled by judging the values ​​of serd and slide.

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

Set the style

.compuretu{color:white;background: red }

3. Manipulate nodes

Since vue itself is a virtual dom, if you change the node style through document, 'style' is may appear. not definde error,

The solution to this problem must require a higher level of understanding of vue. It can obtain the style by using ref and $refs in the periodic mounted function of vue itself. To complete changes to its style: The example is as follows:

<template>
<p>
<p style=“color: green;” ref="abc"><span>我的test</span></p>
</p>
</template>
<script>
export default {
name: &#39;mytest&#39;,
data() {
return {}
},
mounted() {console.log(this.$refs.abc.style.cssText)}
}
<script>
<style>
</style>

Description:

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

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

Usage: In the HTML element, add the ref attribute, and then pass vm.$refs in JS. Attributes to get

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

If you change it, you can directly change the corresponding attributes (this.$ refs.abc.style.color=red）

<script>
 export default {
 name: &#39;mytest&#39;,
 data() {
 return {
 serd:true,
 slid:true,
 mycss: {
  color: &#39;&#39;
 },
 mypagestyle:{
  color: &#39;yellow&#39;,
  background:"blue"
 },
 myarr:{
  color: &#39;white&#39;
 },
 myarrtest:{
  background:&#39;#000&#39;,
  display:&#39;inline&#39;
 },
 display: true
 }
 },
 mounted() {　　
 console.log(this.$refs.abc.style.cssText)
 this.$refs.abc.style.color = &#39;red&#39; //修改属性
 this.$refs.abc.style.background = &#39;black&#39; //新增属性
 this.$refs.abc.style.display = &#39;inline&#39; 
 console.log(111)　
 console.log(this.$refs.abc.style.display)　
 },
 computed: {
 compuretu: function() {
 return {
  compuretu: this.serd && this.slid
 }
 }
 },
 methods:{
 
 }
 }
</script>

Of course, the last method may be a bit difficult for beginners to understand, so I recommend you to use the first few methods

Recommended learning: "vue tutorial"

The above is the detailed content of How to change css in vuejs. For more information, please follow other related articles on the PHP Chinese website!