Comment centrer le texte dans vue.js

La méthode pour centrer le texte dans vue.js : supprimez d'abord la partie CSS et encapsulez-la dans un composant Vue et instancier-la puis liez les données dynamiques au composant et enfin recevez les données et liez les données ; dans le contenu.

[Recommandations d'articles connexes : vue.js]

vue.js Méthode Zhongzhong pour centrer le texte :

Nous supprimons d'abord la partie CSS

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

Ce qui précède est le cœur CSS du composant, qui consiste à centrer le texte de haut en bas. css, puis nous l'encapsulons d'abord dans un composant Vue

partie html

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

Nous enregistrons d'abord cette partie en tant que composant, ici nous utilisons la méthode d'enregistrement locale du composant

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

puis instancier

html:

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

js:

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

De cette façon, la première étape est terminée et le rendu est le suivant

La deuxième étape consiste à lier les données dynamiques au composant. Nous ajoutons d'abord une méthode props lors de l'enregistrement du composant afin que le composant puisse accepter des données, puis utilisons la méthode data pour ajouter des données. au composant

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

De cette façon, notre composant peut recevoir des données et lier les données au contenu. Le code lors de l'instanciation doit également être modifié en conséquence

partie html

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

js. part

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

Le composant de données dynamiques unique est maintenant terminé, mais cette méthode d'alignement est généralement utilisée dans les projets avec des structures de blocs multi-colonnes, nous allons donc écrire un autre exemple multi-colonnes et utiliser la liaison de boucle pour définir plusieurs données.

partie CSS

#example2{
　　width: 100%;
　　overflow: hidden;
}
#example2 div{
　　float: left;
　　width: 25%;
}

partie html

<div id="example2">
　　<div v-for=&#39;aaa in sites&#39;>
　　　　<word-v-middle :data=&#39;aaa&#39; ></word-v-middle>
　　</div>
</div>

partie js

new Vue({
　　el:"#example2",
　　data:{
　　　　sites:[
　　　　　　　　"洗发水洗发水洗发水",
　　　　　　　　"洗发水洗发水",
　　　　　　　　"洗发水洗发水洗发水洗发水洗发水",
　　　　　　　　"洗发水洗发水",　
　　　　　　　]
　　　　},
　　components:{
　　　　'word-v-middle':wordMiddle
　　}
})

L'effet est comme indiqué ci-dessus dans le code ci-dessus, la partie CSS est de. make Le code est constitué de quatre colonnes parallèles. La méthode v-for est utilisée en HTML pour boucler les données. Les données sorties par la boucle sont reçues via : data='aaa' dans le composant, et la source des données est les sites nommés. sites dans les données du tableau d'instanciation de l'élément parent. Dans les projets réels, la liaison des données d'arrière-plan peut être obtenue en remplaçant les données des sites par le tableau généré par l'arrière-plan.

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!