ホームページ >バックエンド開発 >PHPチュートリアル >Vue スタイルの切り替えと Vue 動的スタイルの使用に関するチュートリアル

Vue スタイルの切り替えと Vue 動的スタイルの使用に関するチュートリアル

php中世界最好的语言オリジナル: 2017-12-20 11:51:533860ブラウズ

この記事では、vue のスタイル切り替えと第 1 レベルの vue の動的スタイルの使用に関するチュートリアルを紹介します。ここでは、必要な友人がそこから学ぶことができるいくつかの小さなケースを紹介します。

vueを選んだので、作るときはdomの操作を考えず、すべてvueに任せてください。

以下は非常にシンプルですがよく使われるエフェクトです

ナビゲーションバーのスタイル切り替え機能をjqueryなどを使って書くとかなりの量を書く必要があるかもしれません。のコードなので、vueを使用します

コードは次のとおりです

html

vueのスタイルとクラスバインディングAPIを添付します

<div id="wrap" class="box">
  <div v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</div>
</div>

cssシミュレートされたデータに加えて、実際には単純な論理処理であり、これまでのさまざまな dom 操作に比べて多くの作業が節約されます。

追記：vueの動的スタイルの解決策

*{
        padding: 0;margin: 0;
      }
      .box{
        height: 40px;
        background: cyan;
      }
      .nav{
        line-height: 40px;
        display: inline-block;
        margin-left: 100px;
        cursor: pointer;
      }
      .red{
        color: red;
      }
 
//前提是必须引入vuejs哦！
var vm = new Vue({
      el:"#wrap",
      data:{
        navLists:[
          {
            "text":"首页"          
          },
          {
            "text":"组件"          
          },
          {
            "text":"API"           
          },
          {
            "text":"我们"          
          }
        ],
        changeRed:0
      },
      methods:{
        reds:function(index){
          this.changeRed = index;
        }
      }
    });

これについては何も言うことはありませんが、クラス名に「-」記号が付いている場合はエラーが報告されます

別の

:class="{active: isActive}"

believeがあります。これらの事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。