vue.jsでスタイルを変更する方法

スタイルを変更するための Vue.js メソッド: まず要素の ref 属性を定義し、次に js メソッドを通じて要素のスタイルを変更します。コードは ['background-color:#1F2429;width:66px' ]; 最後に単一のスタイルを変更します。スタイルを作成するときにスタイル名を直接使用できます。

このチュートリアルの動作環境: Windows7 システム、vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

[関連記事の推奨事項: vue.js]

vue.js でスタイルを変更する方法:

1 . 要素定義 refattribute

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

2. js メソッドを使用して要素のスタイルを変更します。複数のスタイルを変更する場合は、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 を使用できます。単一のスタイルを変更する場合は、次のことができます。スタイル名を直接使用します

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

関連する学習の推奨事項: JavaScript 学習チュートリアル

以上がvue.jsでスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。