Vueでは、要素バインディングスタイルのインスタンスコードとして属性を通して結びつけられています。

1891 ワード

vue スタイル行のスタイル

1.直接要素に通します。スタイルのオブジェクトを書きます。


<h1 :style="{color:'red','font-weight':200}">    H1</h1>

2.スタイルオブジェクトをdataに定義し、直接参照する：スタイルの中
1:dataでスタイルを定義する


data:{
  styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
}

2:要素では、属性バインディングの形で、スタイルオブジェクトを要素に適用します。


<h1 :style="styleObj1">    H1</h1>

3.styleでは、配列を通して、複数のdata上のスタイルオブジェクトを参照します。
1:dataでスタイルを定義する


data:{
  styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
  styleObj2:{'font-style':'italic'},
}

2:要素では、属性バインディングの形で、スタイルオブジェクトを要素に適用します。


<h1 :style="[styleObj1,styleObj2]">    H1</h1>

完全コード:


<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
<body>
 <div id='app'>
 
 <h1 :style="{color:'red','font-weight':200}">    H1</h1>
 
 <h1 :style="styleObj1">    H1</h1>
 
 <h1 :style="[styleObj1,styleObj2]">    H1</h1>
 
 </div>
</body>
<script src="vue.min.js"></script>
<script>
 var vm = new Vue({
 el:'#app',
 data:{
  styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
  styleObj2:{'font-style':'italic'},
 }
 });
</script>
</html>

ここでは、Vueの属性を通して要素バインディングスタイルとして結びつけられた記事を紹介します。vue style行のスタイルについては、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。

JavaはTCPを使用してデータ転送の実例を実現します。

java ランダム画像のインスタンスコードを出力することを実現します。