BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト
  4. javascriptのクラスライブラリ

Vueのクラススタイルの使い方の詳細

2022-01-13 10:48:56
vueでクラススタイルを使用するには、いくつかの方法があります。

1. ブーリアン

まず、通常の値を style という名前のクラスを書くために active の中で 
<style>
        .active{
            color: red;
            font-size: 20px;
            font-style: normal;
        }
    </style>
私たちの script タグを作成し vm のインスタンスで、そのインスタンスの data データセンター、書き込み isActive:true は、その
true はこのスタイルが使用されていることを示します。 false というのは 
<script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                isActive:true
             }
       </script>
この時点では v-bind ディレクティブを使用しています。 class クラス 
<div id="app">
        <h1 :class="{active:isActive}"> I am referencing the class style using a boolean</h1>
    </div>
出力を表示します。
ここで、trueをfalseに変更します。 
data:{
   isActive: false
}
出力を見るには

2. 表現方法

v-bindに新しい式を追加することができます。 ディレクティブを呼び出して class クラス
例えば、データセンターでは data をビューレイヤーにレンダリングする場合、参照のインデックスが偶数であるようにしたい
クラスのスタイルです。 
<body>
    
    <div id="app">
        <ul>
            <li v-for="(item,index) in list">{
<! -- -->{index}}----{
<! -- -->{item.name}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,name:"Jinx"},
                    {id:2,name:"Jace"},
                    {id:3,name:"Caitlin"}, {id:3,name:"Caitlin"},
                    {id:4,name:"Ui"},
                ]
            }
        })
    </script>
属性を使ってliにclassのスタイルをバインドします。 
<li v-for="(item,index) in list" :class="{active: index%2 == 0}">
        {
<! -- -->{index}}----{
<! -->{item.name}}
</li>
出力されます。
また、データセンターで定義する mark を定義することで mark の値を定義することで、1行をクラスclassへの個別参照にすることができます。 
<li v-for="(item,index) in list" :class="{active: index === mark}">
        {
<! -- -->{index}}----{
<! -->{item.name}}
</li>


let vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,name:"Jinx"}
                    {id:2,name:"Jace"},
                    {id:3,name:"Caitlin"}, {id:3,name:"Caitlin"},
                    {id:4,name:"Ui"}, {id:4,name:"Ui"},
                ],
                mark:0
            }
        })
この時点では、インデックス 0 のみがスタイル、つまり 1 番目を参照しています。

3. マルチクラスラッピング

複数のクラスをオブジェクトに直接ラップし、オブジェクト名でビューレベルで直接呼び出すことができます!
複数のクラスがあり、ビューレベルではオブジェクト名となるオブジェクトに、データセンター内に配置することができます。 data は、複数のクラスが列挙されたオブジェクト 
<style>
        .f50{
            font-size: 50px;
        }
        .blue{
            color: blue;
        }
        .background{
            background-color: black;
        }
    </style>
<body>
 
   <div id="app">
         <p :class="classObject">Chinese</p>
    </div>
</body>


let vm = new Vue({
            el:"#app",
            data:{
                classObject:{
                    "f50":true,
                    "blue":true,
                    "background":true
                }
            }
        })
出力されます。
また、カスタムな方法で属性を計算し、関数でラップし、その関数から 
let vm = new Vue({
            el:"#app",
            computed:{
         // 1. the name of a custom computed property.
         // 2. what the computed property does, which we wrap into a function
                myclass(){
                    return {
                        "f50":true,
                        "blue":true,
                        "background":true
                    }
                }
            }
        })


<p :class="myclass">Chinese</p>
出力が一貫している

4. v-bindでクラスclassを直接使用することができます: 配列として 

.f50{
            font-size: 50px;
        }
        .blue{
            color: blue;
        }
        .background{
            background-color: black;
        }


<! -- Note that class names are enclosed in quotes -->
        <p :class="['f50','blue','background']">Week after week</p>
出力結果です。
Vueでクラススタイルを使用する詳細についての記事は以上です。Vueでのclass styleの使い方については、過去の記事を検索していただくか、引き続き以下の関連記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します