Was Sie bei der Verwendung von v-bind zum Binden von Klassen in Vue.js beachten sollten-js-Tutorial-php.cn

Was Sie bei der Verwendung von v-bind zum Binden von Klassen in Vue.js beachten sollten

高洛峰

Freigeben： 2017-01-12 13:31:36

Original

1731 Leute haben es durchsucht

Vorwort

In der Vue.js-Version: 1.0.27 wurde die V-Bind-Anweisung in Vue.js zum Binden von Klasse und Stil von Vue.js verbessert. Ausdrucksergebnisse können neben Zeichenfolgen auch Objekte oder Arrays sein.

Ich habe es hier getestet und das folgende Problem festgestellt:

Wenn Sie Objektsyntax verwenden, um eine Klasse zu binden, muss der Klassenname in Anführungszeichen gesetzt werden, um den entsprechenden Stil darzustellen. Andernfalls wird es als Attribut des Objekts betrachtet, was zu einem Initialisierungsfehler führt.

<!DOCTYPE html> 
<html> 
  
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script> 
 <style> 
 .static { 
 font-size: 120px; 
 width: 600px; 
 margin: 0 auto; 
 background-color: yellow; 
 height: 120px; 
 line-height: 120px; 
 text-align: center; 
 } 
  
 .class-a { 
 color: #FF0000; 
 } 
  
 .class-b { 
 text-decoration: underline; 
 } 
 </style> 
</head> 
  
<body> 
 <div id="app"> 
 <div v-bind:class="classObject"> 
 关于class的绑定 
 </div> 
 </div> 
 <script> 
 var vm = new Vue({ 
 el: &#39;#app&#39;, 
 data: { 
 classObject: { 
 //&#39;class-a&#39;,不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成&#39;class-a&#39;,用引号括起来。 
 //否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。 
 &#39;class-a&#39;:false, 
 &#39;class-b&#39;: true 
 } 
 } 
 }); 
 </script> 
</body> 
  
</html>

Nach dem Login kopieren

Referenz:

Offizielle Website von Vue.js----http://cn.vuejs.org/guide/class-and-style.html

Ergänzung:

Hier habe ich das Gefühl, dass das Klassenobjekt im Code ein bisschen wie eine Hash-Tabelle ist, der Schlüssel eine Stilklasse ist und der Wert ein boolescher Typwert ist.

Rufen Sie den Klassen-A-Wert im classObject-Objekt von der Konsole ab und ändern Sie ihn, siehe Bild unten:

Was Sie bei der Verwendung von v-bind zum Binden von Klassen in Vue.js beachten sollten

Sehen Sie sich den Vorgang im an Konsole, lassen Sie mich das Gefühl haben, dass classObject tatsächlich ein bisschen wie ein Hash-Tabellentyp ist. Um dies zu bestätigen, können Sie einen Blick auf den Quellcode werfen (ps: Ich habe ihn mir nicht selbst angesehen).

In Vue.js1.0.19 hat der Autor einige Syntax hinzugefügt, die auch in Arrays verwendet werden kann:

class binding

Oben kann classA mit oder ohne Anführungszeichen hinzugefügt werden. Das Folgende ist mein eigener Testcode.

<!DOCTYPE html> 
<html> 
  
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script> 
 <style> 
 .static { 
 font-size: 120px; 
 width: 600px; 
 margin: 0 auto; 
 background-color: yellow; 
 height: 120px; 
 line-height: 120px; 
 text-align: center; 
 } 
  
 .class-a { 
 color: #FF0000; 
 } 
  
 .classB { 
 text-decoration: underline; 
 } 
  
 .classC{ 
 text-shadow: 2px 2px 4px #000000; 
 } 
 </style> 
</head> 
  
<body> 
 <div id="app"> 
 <!-- 两种绑定：加引号和不加引号，都可以 --> 
 <div v-bind:class="[classA, { &#39;classB&#39;: isB, &#39;classC&#39;: isC }]">class绑定</div> 
 <div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div> 
 </div> 
 <script> 
 var vm = new Vue({ 
 el: &#39;#app&#39;, 
 data: { 
 classA: &#39;class-a&#39;, 
 isB: true, 
 isC: true
 } 
  
 }); 
 </script> 
</body> 
  
</html>

Nach dem Login kopieren

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, der Inhalt dieses Artikels kann Ihnen beim Lernen oder bei der Arbeit helfen kann eine Nachricht hinterlassen, um zu kommunizieren.

Weitere verwandte Artikel über die Verwendung von v-bind zum Binden von Klassen in Vue.js finden Sie auf der chinesischen PHP-Website!