How to center text in vue.js

The method to center the text in vue.js: first take the css part and encapsulate it into a Vue component and instantiate it; then bind dynamic data to the component; finally receive the data and bind the data to in content.

【Recommended related articles: vue.js】

vue.js中来Method to center text:

First we take down the css part

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

The top part is the core css of the component, which is to center the text up and down css, then we first encapsulate it into a Vue component

html part

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

We first register this part as a component, here we use the local registration method of the component

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

After instantiation

html:

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

js:

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

In this way, even if the first step is completed, the rendering is as follows

The second step is to bind dynamic data to the component. We first add a props method when the component is registered so that the component can accept data, and then use the data method to add data to the component

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

In this way, our component can receive data and bind the data to the content. The code during instantiation must also be changed accordingly

html part

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

The single dynamic data component is now complete, but this alignment method is generally used in projects with multi-column block structures, so we write another multi-column example and use loop binding Defining multiple data

css part

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

html part

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

js part

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

The effect is as shown above. In the above code, the css part is for The code is four columns in parallel. The v-for method is used in HTML to loop data. Within the component, the data output by the loop is received through: data='aaa', and the source of the data is the sites named sites in the data in the instantiation of the parent element. array. In actual projects, the binding of background data can be achieved by replacing the data in sites with the array output by the background.

Related free learning recommendations: javascript (video)

The above is the detailed content of How to center text in vue.js. For more information, please follow other related articles on the PHP Chinese website!