vue.js動的変更css

私たちはVueを知っています.jsにはデータ駆動ビューという特性があります.domを変更する必要はありません.domを通さずにスタイルを動的に変更する方法について、公式サイトではいくつかの方法を示しています.ここではいくつかの例を書いて実現しました(vue-cliを使用します):

1、data()に動的styleをバインドする

まずdata()でスタイルグループTheStyleを定義します.

data(){
          return{
            TheStyle:{
              backgroundColor:'yellow',
              width:'300px',
              height:'60px',
              transition:'all 0.7s'
            }
          }
      },

ここでcssプロパティのネーミングにはアルパカネーミング法が使用され、プロパティの値は文字列で、値は'を付けないでください.'セミコロンを表示できません.そうしないと表示できません.
次に、テスト用のdivを定義します.

然后在div中绑定我们前面定义的TheStyle，使用:style的方式绑定data()中的TheStyle。

然后我们定义一个点击事件"changeColor"用来测试动态样式：

 changeColor(){
            this.$data.TheStyle.backgroundColor='black';
            this.$data.TheStyle.width='50px';
          },

これにより、私たちがテストしたdivをクリックすると、色とdivのサイズを変えることができます.

2、refsでstyleを修正する

テスト用にdivを定義します.

其中要定义一个属性ref="TheStyle2"，然后定义一个测试的方法changeColor2：

 changeColor2(){
            this.$refs.TheStyle2.style.backgroundColor='red';
            this.$refs.TheStyle2.style.width='400px';
            this.$refs.TheStyle2.style.transition='all 0.9s';
          },

ここではthis.$を使用できます.refs.TheStyle2.style divのstyleプロパティを直接変更して目的を達成

3、動的バインドclass

詳細は公式チュートリアルを参照してください.詳細は次のとおりです.https://cn.vuejs.org/v2/guide/class-and-style.html

4、すべてのコード：

ここではvue-cliと書かれたコンポーネントです.

    export default {
        name: "test",

      data(){
          return{
            ObjectChange:{
              test:true,
              atest:false
            },
            isActive:true,
            position:'1',
            TheStyle:{
              backgroundColor:'yellow',
              width:'300px',
              height:'60px',
              transition:'all 0.7s'
            }
          }
      },
      methods:{
          changeColor(){
            this.$data.TheStyle.backgroundColor='black';
            this.$data.TheStyle.width='50px';
          },
          changeColor2(){
            this.$refs.TheStyle2.style.backgroundColor='red';
            this.$refs.TheStyle2.style.width='400px';
            this.$refs.TheStyle2.style.transition='all 0.9s';
          },
      }
    }