vue で要素にスタイルを追加する方法

追加方法: 1. ":class="['クラス名']" ステートメントを使用して追加します。 2. ":class="['クラス名 1','クラス名 2', {属性名 (クラス名):'属性値 (true または false)}]"" ステートメントを使用します。 3. ":class="{属性名 (クラス名):true}" ステートメントを使用します。 4. 「:style」を使用します。 ="{ 'スタイル名':'スタイル値'}"" ステートメント; 5. 追加するには、":style="style"" ステートメントを使用します; 6. ":style="[data]"" ステートメントを使用します。

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

#vue にスタイルを追加します

1. クラス スタイルを使用します: クラス名は引用符で囲む必要があります;

1. 配列

<h1 id="这种方法-需要用-v-bind-gt-绑定">这种方法  需要用  v-bind: => :  绑定</h1>

2. で 3 項式を使用します。配列式

<h1 id="这种方法-需要用-v-bind-gt-绑定">这种方法  需要用  v-bind: => :  绑定</h1>

3. 配列内のネストされたオブジェクト

<h1 id="这种方法-需要用-v-bind-gt-绑定">这种方法  需要用  v-bind: => :  绑定</h1>

#4. 直接適用可能なオブジェクト

<h1 id="这种方法-需要用-v-bind-gt-绑定">这种方法  需要用  v-bind: => :  绑定</h1>

2. インライン スタイルを使用します; 1. 要素に直接 pass:style

#

<h1 id="这种方法-需要用-v-bind-gt-绑定">这种方法  需要用  v-bind: => :  绑定</h1>

2.スタイル オブジェクトをデータに定義し、:style

<h1 id="这种方法-需要用-v-bind-gt-绑定">这种方法  需要用  v-bind: => :  绑定</h1>

3 で参照します。:style では、配列を通じてデータ上の複数のスタイル オブジェクトを参照します。

<h1 id="这种方法-需要用-v-bind-gt-绑定">这种方法  需要用  v-bind: => :  绑定</h1>

コード例:

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Vue样式的运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 150px;
            height: 150px;
            background: skyblue;
            line-height: 150px;
            text-align: center;
        }

        .border {
            border-radius: 50%;
        }

        .color {
            color: #fff;
            font-size: 24px;
        }
    </style>



    <div>
        <button>切换</button>
        <!-- 添加样式/切换样式 -->
        <!-- 对象方式   border 数据模型    tagger 真假 真显示 假隐藏-->
        <!-- <div class="box" :class="{&#39;border&#39;:tagger}">添加style样式</div> -->
        
        <!-- 表达式 -->
        <!-- <div :class="tagger ? &#39;border&#39; : &#39;&#39;" class="box">添加style样式</div> -->
        
        <!-- 数组 -->
        <div>添加style样式</div>
    </div>

    <script></script>
    <script>
        let vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                tagger : true,
                vstyle : [&#39;border&#39;,&#39;box&#39;],
                vObj : {"border":true,"color":true,"box":true}
            },
            methods: {
            }
        })
    </script>

(学習ビデオ共有: vuejs 入門チュートリアル、

基本プログラミング ビデオ

)

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