v-bind がスタイル属性を動的にバインドする方法の詳細な説明

v-bind はどのようにして style 属性を動的にバインドしますか?この記事では、スタイル属性を動的にバインドするための v-bind 命令のさまざまな構文について詳しく説明します。

#v-bind は、スタイル属性を動的に設定してインライン スタイルをバインドできます。書き方:

<!--完整写法-->
<标签名 v-bind:style="vue实例中的数据属性名"/>

<!--简化写法-->
<标签名 :style="vue实例中的数据属性名"/>

1. v-bindはインラインスタイル属性を動的にバインドする(オブジェクト構文)

class属性を動的にバインドした後、 class の値は変数であり、これをデータに配置して動的にスタイルをバインドできます。 (学習ビデオ共有: vue ビデオ チュートリアル)

1. v-bind:style のオブジェクト構文は CSS 構文に非常によく似ていますが、実際には JavaScript オブジェクトです

:style="{key(属性名):value(属性值)}"

font-size

• などの CSS プロパティ名を記述する場合、次のことができます。キャメルケース (camelCase) を使用します: fontSize

• またはダッシュ区切り (ケバブケース、一重引用符で囲むことを忘れないでください): 'font-size '

<h2 :style="{fontSize:&#39;50px&#39;}">{{message}}</h2>
<h2 :style="{&#39;font-size&#39;:&#39;50px&#39;}">{{message}}</h2>

注: キャメルケースの名前付けを使用しない場合は、一重引用符を追加する必要があります。vue 構文がバインドされると、一重引用符が追加されなくなるためです。内側の引用符 文字列は変数名として扱われ、50px であっても変数名として扱われるため、文字列の場合は一重引用符を追加する必要があります。

value (属性値) には 2 つの実装があります: 引用符で囲まれるか引用符で囲まれない

• 値が引用符で囲まれている場合、Vue の解析時に処理されます。それを固定値として扱います。たとえば、上記の例の "50px"

• 値が二重引用符で囲まれていない場合、変数として扱われ、Vue はそれを次のように解析します。変数。変数値は、データ内の Find

<div id="app">
	<!-- 如下：finalSize当成一个固定值来使用 -->
	<h2 :style="{fontSize:&#39;50px&#39;}">{{message}}</h2> 
	
	<!-- 如下：finalSize当成一个变量来使用，通过data动态绑定 -->
	<h2 :style="{fontSize: finalSize + &#39;px&#39;, backgroundColor: finalColor }">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el: "#app",
    data: {
        message: &#39;你好啊！&#39;,
        finalSize: 100,
        finalColor: &#39;red&#39;
    }
})
</script>

にあります。 2. 通常は、スタイル オブジェクトに直接バインドすることをお勧めします。

<div id="app">
	<!-- 如下：绑定到一个样式对象styleObject，对象中设置对个key:value对 -->
	<h2 :style="styleObject">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el: "#app",
	data: {
		message: &#39;你好啊！&#39;,
	        styleObject: {
			color: &#39;red&#39;,
			fontSize: &#39;50px&#39;,
			backgroundColor: &#39;pink&#39;
		}
	}
})
</script>

3. 返されたオブジェクトの計算されたプロパティをバインドすることもできます

<div id="app">
	<!-- 如下：绑定一个返回对象的计算属性 -->
	<h2 :style="styleObject">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el: "#app",
	data: {
		message: &#39;你好啊！&#39;,
		color: &#39;red&#39;,
		fontSize: &#39;50px&#39;
	},
	computed: {
	  styleObject: function () {
		return {
		  color:this.color, fontSize:this.fontSize
		}
	  }
	}

})
</script>

オブジェクト構文は、多くの場合、スタイルの切り替えを実装するために、返されたオブジェクトの計算されたプロパティと組み合わせて使用​​されます

例: 赤と黒の色の切り替え

<div id="app">
	<span :style="styleObj" @click="handleFontColor">Hello World</span>
</div>

<script>
	var vm = new Vue({
		el: &#39;#app&#39;,
		data: {
			styleObj: {
				color: &#39;red&#39;
			}
		},
		methods: {
			handleFontColor(){
				this.styleObj.color === &#39;red&#39; ? this.styleObj.color = &#39;black&#39; : this.styleObj.color = &#39;red&#39;
			}
		}
	})
</script>

2. v-bind はインライン スタイル属性を動的にバインドします (配列構文)

v-bind は配列メソッドを使用して、スタイルを動的にバインドします。あまり一般的には使用されません。使用法は次のとおりです: 最初に vue でインスタンス データ部分で使用するスタイルを記述し、次に v-bind 動的バインディングを使用する場所で配列バインディングを使用します。配列にはスタイルが含まれていますvueで定義された名前。

配列構文の形式は次のとおりです:

:style="[base1,base2]"

v-bind:style の配列構文では、複数のスタイル オブジェクトを同じ要素に適用できます:

<div id="app">
	<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: &#39;你好啊！&#39;,
            baseStyle: { backgroundColor: &#39;red&#39; },
            baseStyle1: { fontSize: &#39;100px&#39; },
        }
    })
</script>

プレフィックスを自動的に追加: v-bind:style が、transform などの ブラウザ エンジン プレフィックス

を必要とする CSS 属性を使用する場合、Vue.js は対応するプレフィックスを自動的に検出して追加します。

3. v-bind はインライン スタイル属性 (複数の値) を動的にバインドします

はスタイルにバインドできます指定された属性は、複数の値を含む配列を提供します。これは、複数のプレフィックス付きの値を提供するためによく使用されます。

<div :style="{ display: [&#39;-webkit-box&#39;, &#39;-ms-flexbox&#39;, &#39;flex&#39;] }"></div>

このように記述すると、ブラウザーでサポートされている配列の最後の値のみが表示されます。

この例では、ブラウザがブラウザ接頭辞のないフレックスボックスをサポートしている場合、display: flex

のみがレンダリングされます。

(学習ビデオ共有: Web フロントエンド開発、基本プログラミング ビデオ

)###

以上がv-bind がスタイル属性を動的にバインドする方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。