Comment changer le style dans vue.js

La méthode pour changer le style de vue.js : définissez d'abord l'attribut ref pour l'élément ; puis modifiez le style de l'élément via la méthode js, le code est ['background-color:#1F2429; width:66px']; enfin modifier le single Vous pouvez utiliser le nom du style directement lors de la création d'un style.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, vue version 2.9.6 Cette méthode convient à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Comment changer de style dans vue.js :

1. Donnez l'attribut ref de définition d'élément

 <el-button ref="btnClick" class="list_button" " @click="openClose"></el-button>

2. Modifiez le style de l'élément via la méthode js. Lorsque vous modifiez plusieurs styles, vous pouvez utiliser cssText

function openClose() {
        this.isCollapse = !this.isCollapse
 
        if (this.isCollapse) {
            this.$refs.btnClick.$el.style.cssText =
                'background-color:#1F2429;width:66px';
           
        } else {
            this.$refs.btnClick.$el.style.cssText =
                'background-color:#1F2429;width:140px';
        }
    }

3. utilisez directement le nom du style

function openClose() {
        this.isCollapse = !this.isCollapse
 
        if (this.isCollapse) {
            this.$refs.btnClick.$el.style.color = 'red';
           
        } else {
            this.$refs.btnClick.$el.style.color = 'blue';
        }
    }

Recommandations d'apprentissage associées : Tutoriel d'apprentissage javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!