Vueでスタイルを設定する方法

方法: 1. タグの style 属性を使用してインライン スタイルを追加します; 2. 「v-bind」命令を使用してバインディングを通じてスタイル スタイルを設定します; 3. vue 属性をスタイルに設定します構文「:style ="obj"」または「:style="[obj,obj1...]"」を使用します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue はスタイルを設定します

1. インライン スタイルを直接追加します

2. バインディングを通じてスタイルを設定します

3. Vue の属性を設定しますスタイルとして (vue 属性は複数にすることができます)

<div id="box">
            <!--直接添加样式-->
            <p style="background-color: blue;">sssss</p>
            <!--绑定样式-->
            <p v-bind:style="&#39;background-color: red;&#39;">sssss</p>
            <!--将vue中的属性作为样式设置-->
            <p :style="obj">sssss</p>
            <!--将多个属性作为样式设置-->
            <p :style="[obj,obj1]">sssss</p>
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#box",
                data:{
                    obj:{
                        backgroundColor:"gold"
                    },
                    obj1:{
                        fontSize: "30px"
                    }
                },
            });
        </script>

関連する推奨事項:「vue.js チュートリアル」

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