Ausführliche Erklärung, wie v-bind Stilattribute dynamisch bindet

Wie bindet v-bind das Stilattribut dynamisch? Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis der verschiedenen Syntaxen der V-Bind-Anweisung zum dynamischen Binden von Stilattributen. Ich hoffe, er wird Ihnen hilfreich sein!

v-bind kann das Stilattribut dynamisch festlegen, um Inline-Stile zu binden. Schreibmethode:

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

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

1. v-bind bindet dynamisch das Inline-Stilattribut (Objektsyntax)

Nach der dynamischen Bindung des Klassenattributs ist der Wert der Klasse eine Variable, die in Daten und platziert werden kann dynamisch gebundener Set-Stil. (Lernvideo-Sharing: vue-Video-Tutorial)

1. Die Objektsyntax von v-bind:style ist der CSS-Syntax sehr ähnlich, beim Schreiben von CSS handelt es sich jedoch tatsächlich um ein JavaScript-Objekt

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

Attributnamen Wenn beispielsweise „font-size

• “ „camelCase“ verwenden kann: fontSizefontSize

• 或短横线分隔（kebab-case，记得用单引号括起来）：'font-size'

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

注意：如果不采用驼峰命名，就一定要加单引号，因为一旦绑定了vue语法，他就会将里边未加单引号的字符串当成变量名，就算是50px也会被当成变量名，所以如果是字符串就要加上单引号。

value(属性值)有两种实现：被引号包裹或不被引号包裹

• value加引号时，vue在解析的时候，会把它当成一个固定值。例如上面示例中的的“50px”

• value不加双引号时，则当做变量，vue将它解析成一个变量， 变量值会在data中找

<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>

二、v-bind动态绑定内联style属性（数组语法）

v-bind使用数组方式动态绑定style使用较少，用法为：先在vue实例data部分写好要使用的样式，然后在要使用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 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

三、v-bind动态绑定内联style属性（多重值）

可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

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

这样写只会渲染数组中最后一个被浏览器支持的值。

在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex

oder durch einen Bindestrich getrennt (Kebab-Fall, denken Sie daran, nach oben einfache Anführungszeichen zu verwenden): 'font-size'rrreee

Hinweis: Wenn Sie keine Benennung in Groß- und Kleinschreibung verwenden, müssen Sie einfache Anführungszeichen hinzufügen, denn sobald Vue gebunden ist, Grammatik, Er behandelt die Zeichenfolge ohne einfache Anführungszeichen als Variablennamen. Sogar 50 Pixel werden als Variablennamen behandelt. Wenn es sich also um eine Zeichenfolge handelt, müssen einfache Anführungszeichen hinzugefügt werden. Wert (Attributwert) hat zwei Implementierungen: in Anführungszeichen eingeschlossen oder nicht in Anführungszeichen eingeschlossen

🎜🎜🎜Wenn der Wert in Anführungszeichen gesetzt wird, behandelt Vue ihn beim Parsen als festen Wert. Zum Beispiel „50px“ im obigen Beispiel🎜🎜🎜Wenn der Wert nicht in doppelte Anführungszeichen gesetzt ist, wird er als Variable behandelt und von Vue in eine Variable analysiert Der Variablenwert wird in den Daten gefunden🎜 rrreeerrreee🎜🎜🎜🎜2. Normalerweise ist es besser, direkt an ein Stilobjekt zu binden, wodurch die Vorlage übersichtlicher wird: 🎜🎜rrreeerrreee🎜🎜🎜🎜3. Sie können auch ein berechnetes Attribut des binden Zurückgegebenes Objekt🎜🎜rrreeerrreee🎜🎜🎜Objektsyntax wird oft mit dem zurückgegebenen Objekt kombiniert. Berechnete Attribute werden verwendet, um einen Stilwechsel zu implementieren🎜🎜Beispiel: roter und schwarzer Farbwechsel🎜rrreeerrreee🎜🎜🎜🎜🎜2. v-bind bindet Inline-Stilattribute dynamisch (Array-Syntax) 🎜🎜🎜🎜v -bind verwendet die Array-Methode, um den Stil dynamisch zu binden. Die Verwendung ist wie folgt: Schreiben Sie zuerst den Stil, der im Datenteil der Vue-Instanz verwendet werden soll, und verwenden Sie dann die Array-Bindung dort, wo die dynamische Bindung von v-bind erfolgen soll Verwendet. Das Array enthält den in vue definierten Stilnamen. 🎜🎜Das Array-Syntaxformat ist: 🎜rrreee🎜🎜🎜v-bind:style Die Array-Syntax kann mehrere Stilobjekte auf dasselbe Element anwenden: 🎜rrreeerrreee🎜🎜

🎜Präfix automatisch hinzufügen: Wenn v-bind:style verwendet wird, müssen Sie Browser-Engine-Präfix 🎜 CSS-Attribute wie Transformation, Vue.js erkennt automatisch das entsprechende Präfix und fügt es hinzu. 🎜

🎜🎜🎜3. v-bind bindet dynamisch Inline-Stilattribute (mehrere Werte) 🎜🎜🎜🎜🎜 kann ein Array mit mehreren Werten für die Attribute in der Stilbindung bereitstellen, was häufig verwendet wird um mehrere Werte bereitzustellen. 🎜rrreee🎜So geschrieben, wird nur der letzte Wert im Array gerendert, der vom Browser unterstützt wird. 🎜🎜Wenn der Browser in diesem Beispiel Flexbox ohne das Browser-Präfix unterstützt, wird nur display: flex gerendert. 🎜🎜 (Teilen von Lernvideos: 🎜Web-Frontend-Entwicklung🎜, 🎜Einfaches Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie v-bind Stilattribute dynamisch bindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!