vue で要素にスタイルを追加する方法-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2023-01-12 18:10:39

オリジナル

2558 人が閲覧しました

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

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

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

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

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

1. 配列

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>

ログイン後にコピー

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

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,表达式?&#39;类名3&#39;:&#39;&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>

ログイン後にコピー

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

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,{属性名(类名):&#39;属性值(true或false)}]">这种方法  需要用  v-bind: => :  绑定</h1>

ログイン後にコピー

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

<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法  需要用  v-bind: => :  绑定</h1>

ログイン後にコピー

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

<h1 :style = "{&#39;样式名&#39;:&#39;样式值&#39;}">这种方法  需要用  v-bind: => :  绑定</h1>

ログイン後にコピー

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

<h1 :style = "vue里的样式">这种方法  需要用  v-bind: => :  绑定</h1>

ログイン後にコピー

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

<h1 :style = "[data1,data2]">这种方法  需要用  v-bind: => :  绑定</h1>

ログイン後にコピー

コード例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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>
</head>

<body>
    <div id="app">
        <button @click="tagger = !tagger">切换</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 :class="tagger ? [&#39;box&#39;,&#39;border&#39;] : [&#39;box&#39;]">添加style样式</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                tagger : true,
                vstyle : ['border','box'],
                vObj : {"border":true,"color":true,"box":true}
            },
            methods: {
            }
        })
    </script>

</body>

</html>

ログイン後にコピー

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

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

)

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