Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie v-bind Klassenattribute dynamisch bindet
Ausführliche Erklärung, wie v-bind Klassenattribute dynamisch bindet
- 青灯夜游nach vorne
- 2022-08-10 14:05:552733Durchsuche
Wie bindet v-bind Klassenattribute dynamisch? Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis der verschiedenen Syntaxen der V-Bind-Anweisung zum dynamischen Binden von Klassenattributen. Ich hoffe, er wird Ihnen hilfreich sein!
v-bind kann Klassenattribute dynamisch festlegen, um dynamische Stile zu implementieren. Schreibmethode:
<!--完整写法--> <标签名 v-bind:class="vue实例中的数据属性名"/> <!--简化写法--> <标签名 :class="vue实例中的数据属性名"/>
1. v-bind bindet dynamisch das Klassenattribut (Objektsyntax)
Nach der dynamischen Bindung des Klassenattributs ist der Wert der Klasse eine Variable, die dynamisch in Daten platziert werden kann Binden Sie den Stil, um die Klassen dynamisch zu wechseln. (Lernvideo-Sharing: vue-Video-Tutorial)
1. Binden Sie eine oder mehrere Klassen direkt über {}{}绑定一个或多个类
v-blid:class的属性中可以传入一个对象，对象中包括一组组键值对
:class= "{key1：value1，key2：value2...}"类名就是对应的样式，也就是键（key）；value就是对应着增加和移除该类，取值是true和false
若value值为
true，则该key样式起作用若value值为
false，则该key样式不起作用
<!-- 样式 -->
<style>
.color {
color: red;
}
.background {
background-color: pink;
}
</style><div id="app">
<h2 class="color">{{message}}</h2>
<!-- 第一种：直接用style中的样式，固定写死； -->
<h2 v-bind:class="color">{{message}}</h2>
<!-- 第二种：用指令v-bind,class的属性值color为变量； -->
<!-- vue解析，变量对应data中color属性值，则用了color的样式； -->
<h2 v-bind:class="{color:isColor, background:isBackground}">{{message}}</h2>
<!-- 第三种：用指令v-bind；后面接对象{key1：value1，key2：value2} -->
<!-- isColor为false则color样式不起作用。 -->
<!-- isBackground为true则background样式起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
color:"color",
isColor:false,
isBackground:true
}
})
</script>
v-bind:class 指令也可以与普通的 class 属性共存。
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>data: {
isActive: true,
hasError: true
}当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 false，class 列表将变为 "static active"。
data: {
isActive: true,
hasError: false
}2、绑定的数据对象不必内联定义在模板里，可绑定到一个类对象classObject
<!-- 样式 -->
<style>
.color {
color: red;
}
.background {
background-color: pink;
}
</style><div id="app">
<h2 v-bind:class="classObject">{{message}}</h2>
<!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->
<!-- color为true则color样式起作用。 -->
<!-- background为false则background样式不起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
classObject: {
color: true,
background: false
}
}
})
</script>
3、也可以绑定一个返回对象的计算属性
<div id="app">
<h2 v-bind:class="classObject">{{message}}</h2>
<!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->
<!-- color为true则color样式起作用。 -->
<!-- background为false则background样式不起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
isColor: true,
isBackground: true
},
computed: {
classObject: function () {
return {
color: this.isColor,
background: this.isBackground
}
}
}
})
</script>
4、class中的对象比较复杂，则直接放在一个methods中，然后调用这个函数，实现动态切换
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.active{
background-color: pink;
}
.line{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="getClasses()">方法methods：{{message}}</h2>
<h2 :class="classes">计算属性computed：{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
isAcitve:true,
isLine:true
},
methods:{
btnClick: function () {
this.isAcitve = !this.isAcitve
},getClasses:function () {
return {active:this.isAcitve,line:this.isLine}
}
},
computed: {
classes: function () {
return {active:this.isAcitve,line:this.isLine}
}
}
})
</script>
</body>
</html>
二、v-bind动态绑定class属性（数组语法）
我们可以把一个数组传给 :class，以应用一个 class 列表；
数组语法格式为：
:class="[base1,base2]"
v-bind 动态绑定class 数组语法，就是直接给其传入一个数组，但是数组里面都是类名，数组中的类名，在页面中都会被加入到该标签上。通过数组内元素的增加或减少来实现，样式的改变。
注意：这里面的类名都需要用
' '
v-blid:class Ein Objekt kann Das Objekt enthält eine Reihe von Schlüssel-Wert-Paaren. Der Klassenname ist der entsprechende Stil, dh der Wert entspricht dem Hinzufügen und Entfernen der Klasse, und der Wert ist true und false
- Wenn der Wert
trueist, dann der Schlüssel Stil funktioniert -
Wenn der Wert
falseist, funktioniert der Schlüsselstil nicht
<h2 class="title" :class="['active','line']">{{message}}</h2><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="['active','line']">{{message}}</h2>
<h2 :class="[active,line]">{{message}}</h2>
<h2 :class="[active,line]">{{message}}</h2>
<h2 :class="getClasses()">方法methods：{{message}}</h2>
<h2 :class="classes">计算属性computed：{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
line:'bbbbbbbbbb'
},
methods:{
getClasses: function () {
return [this.active,this.line]
}
},
computed: {
classes: function () {
return [this.active,this.line]
}
}
})
</script>
</body>
</html>
v-bind:class-Direktive kann auch mit gewöhnlichen Klassenattributen koexistieren. <img src="https://img.php.cn/upload/image/418/532/266/166011037867187Ausf%C3%BChrliche%20Erkl%C3%A4rung,%20wie%20v-bind%20Klassenattribute%20dynamisch%20bindet" title="166011037867187Ausführliche Erklärung, wie v-bind Klassenattribute dynamisch bindet" alt="Ausführliche Erklärung, wie v-bind Klassenattribute dynamisch bindet"><pre class="brush:html;toolbar:false"><div v-bind:class="[isActive ? activeClass : &#39;&#39;, errorClass]"></div></pre><pre class="brush:html;toolbar:false"><div v-bind:class="[{ active: isActive }, errorClass]"></div></pre>
Wenn sich isActive oder hasError ändert, wird die Klassenliste entsprechend aktualisiert. Wenn beispielsweise der Wert von hasError false ist, wird die Klassenliste zu „static active“. <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.aaa{
padding: 10px;
}
.active{
background-color: pink;
}
.line{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="['aaa','active']">{{message}}</div>
<div :class="['aaa', nba, isActive? 'active': '']">{{message}}</div>
<div :class="['aaa', nba, {'actvie': isActive}]">{{message}}</div>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
message: "Hello World",
nba: 'line',
isActive: false
}
}
})
</script>
</body>
</html>
2. Das gebundene Datenobjekt muss nicht inline in der Vorlage definiert werden, sondern kann an ein Klassenobjekt classObject gebunden werden
rrreeerrreee
3. Sie können auch ein berechnetes Attribut des zurückgegebenen Objekts bindenrrreee
🎜🎜rrreee🎜
🎜🎜🎜🎜2. v-bind bindet Klassenattribute dynamisch (Array-Syntax) 🎜🎜🎜🎜Wir kann ein Array übergeben Geben Sie :class an, um eine Klassenliste anzuwenden; 🎜🎜Array-Syntaxformat ist: 🎜rrreee🎜v-bind Die Syntax dynamisch gebundener Klassenarrays besteht darin, ein Array direkt zu übergeben, aber es gibt alle Ist der Klassenname. Die Klassennamen im Array werden der Beschriftung auf der Seite hinzugefügt. Der Stil wird durch Hinzufügen oder Entfernen von Elementen im Array geändert. 🎜🎜Hinweis: Die Klassennamen hier müssen mit ' ' umschlossen werden. Wenn nicht, behandelt Vue sie als Attribut in den Daten und sucht in den Daten danach Wenn Sie ein solches Attribut in den Daten haben, wird der Fehler auftreten. Dies ist in Vue üblich. Es wird als Attribut in Daten ohne Anführungszeichen behandelt. 🎜🎜🎜Hinweis: Es ist dasselbe wie die Objektsyntax und kann gleichzeitig mit gewöhnlichen Klassen ohne Konflikt vorhanden sein rrreee🎜🎜🎜🎜Wenn Sie auch Klassen in der Liste basierend auf Bedingungen wechseln möchten, können Sie einen ternären Ausdruck verwenden: 🎜rrreee🎜Wenn Sie so schreiben, wird immer errorClass hinzugefügt, aber nur activeClass, wenn isActive wahr ist. 🎜🎜Allerdings ist es etwas umständlich, so zu schreiben, wenn es mehrere bedingte Klassen gibt. Daher kann die Objektsyntax auch in der Array-Syntax verwendet werden: 🎜rrreee🎜Beispiel: 🎜rrreee🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜Web-Front-End-Entwicklung🎜, 🎜Grundlegendes Programmiervideo🎜)🎜Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie v-bind Klassenattribute dynamisch bindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Analyse der 4-v-bind-Anweisung (mit Code)
- Eine eingehende Analyse der dynamischen Attributbindungsanweisung v-bind von Vue
- Analysieren Sie die Kapselungsanforderung von Axios in Vue (mit Schrittcode).
- 3 Möglichkeiten zum Implementieren des Routenladens bei Bedarf (verzögertes Laden von Routen) in Vue
- Erstellung, Rendering und Registrierung von VUE-Komponenten (Zusammenfassungsfreigabe)
- Ausführliche Erklärung zum Erstellen von Vue-Router-Unterrouten (verschachtelte Routen)