So zentrieren Sie Text in vue.js

So zentrieren Sie den Text in vue.js: Nehmen Sie zunächst den CSS-Teil, kapseln Sie ihn in eine Vue-Komponente und instanziieren Sie ihn. Binden Sie dann dynamische Daten an die Komponente und binden Sie die Daten schließlich an den Inhalt.

【Empfehlung für einen verwandten Artikel: vue.js】

vue.js-Methode zum Zentrieren des Textes:

Zuerst entfernen wir den CSS-Teil.

css:

.word-v-middle{
margin-bottom: 0;
font-size: 12px;
min-height: 31px;
display: flex;
align-items: center;
justify-content: center;
height: 31px;
margin-top: 5px;
color: #87878a;
white-space: normal;
}
.word-v-middle span{
text-align: left;
font-size: 10px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

top Es ist Das Kern-CSS der Komponente, das ist das CSS, das den Text nach oben und unten zentriert. Als nächstes kapseln wir ihn in eine Vue-Komponente

HTML-Teil

<p class="word-v-middle"><span>文字内容</span></p>

Wir registrieren diesen Teil zunächst als Komponente und verwenden ihn hier der Komponente Nach der Registrierungsmethode

var wordMiddle = {
　　template:'<p class="word-v-middle"><span>文字内容</span></p>',
};

, instanziieren

html:

<div id="exp">
　　<word-v-middle></word-v-middle>
</div>

js:

new Vue({
　　el:"#exp",
　　components:{
　　　　'word-v-middle':wordMiddle
　　}
});

Auf diese Weise ist der erste Schritt abgeschlossen und das Rendering ist wie folgt

Der zweite Schritt ist Binden Sie dynamische Daten an die Komponente. Fügen Sie beim Registrieren der Komponente zunächst eine Props-Methode hinzu, damit die Komponente Daten empfangen kann, und verwenden Sie dann die Datenmethode, um Daten zur Komponente hinzuzufügen

var wordMiddle = {
　　template:&#39;<p class="word-v-middle"><span>{{msg}}</span></p>&#39;,
　　props:[&#39;data&#39;],
　　data:function(){
　　　　return {
　　　　　　msg:this.data
　　　　};
　　}
};

Damit unsere Komponente Daten empfangen und binden kann Daten zum Inhalt, Code während der Instanziierung Wir müssen es auch entsprechend ändern

HTML-Teil

<div id="exp">
　　<word-v-middle :data=&#39;aaa&#39; ></word-v-middle>
</div>

js-Teil

new Vue({
　　el:"#exp",
　　data:{
　　　　aaa:'hello',
　　},
　　components:{
　　　　'word-v-middle':wordMiddle
　　}
})

Jetzt ist die einzelne dynamische Datenkomponente fertig, aber diese Ausrichtungsmethode wird im Allgemeinen in Projekten mit mehreren Spalten verwendet Blockstrukturen, also schreiben wir ein weiteres mehrspaltiges Beispiel und verwenden eine Schleife, um mehrere Daten zu binden , Der CSS-Teil besteht darin, den Code parallel zu machen Vier Spalten, die v-for-Methode wird in HTML zum Schleifen von Daten verwendet, und die Schleifenausgabedaten werden empfangen über: data='aaa' in der Komponente und die Datenquelle ist das Array mit dem Namen „sites“ in den Daten bei der Instanziierung des übergeordneten Elements. In tatsächlichen Projekten kann die Bindung von Hintergrunddaten erreicht werden, indem die Daten in „sites“ durch die Array-Ausgabe des Hintergrunds ersetzt werden.

Verwandte kostenlose Lernempfehlungen:

Javascript

(Video)

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Text in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!