vue.js에서 텍스트를 중앙에 배치하는 방법-View.js-php.cn

vue.js에서 텍스트를 중앙에 배치하는 방법

coldplay.xixi

풀어 주다： 2020-11-09 10:55:19

원래의

18791명이 탐색했습니다.

vue.js에서 텍스트를 중앙에 배치하는 방법: 먼저 CSS 부분을 Vue 구성 요소로 캡슐화하고 인스턴스화합니다. 그런 다음 동적 데이터를 구성 요소에 바인딩하고 마지막으로 데이터를 콘텐츠에 바인딩합니다.

vue.js에서 텍스트를 중앙에 배치하는 방법

【관련 추천 글: vue.js】

vue.js 텍스트 중앙 정렬 방법:

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

로그인 후 복사

top 입니다. 텍스트를 중앙에 배치하는 CSS인 컴포넌트의 핵심 CSS입니다. 다음으로 이를 Vue 컴포넌트

html part

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

로그인 후 복사

로 캡슐화합니다. 먼저 이 부분을 컴포넌트로 등록하고 여기서는 부분을 사용합니다. Component의 등록 방법

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

로그인 후 복사

, instantiate

html:

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

로그인 후 복사

js:

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

로그인 후 복사

이렇게 하면 첫 번째 단계가 완료되고 렌더링은 다음과 같습니다

vue.js에서 텍스트를 중앙에 배치하는 방법

두 번째 단계는 컴포넌트에 동적 데이터를 바인딩합니다. 컴포넌트를 등록할 때 먼저 props 메소드를 추가하여 컴포넌트가 데이터를 수신할 수 있게 하고, 그런 다음 data 메소드를 사용하여 컴포넌트에 데이터를 추가합니다

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

로그인 후 복사

우리 컴포넌트가 데이터를 수신하고 바인딩할 수 있습니다. 데이터를 콘텐츠로, 인스턴스화하는 동안 코드도 그에 맞게 변경해야 합니다

html part

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

로그인 후 복사

js part

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

로그인 후 복사

이제 단일 동적 데이터 구성 요소가 완성되었지만 이 정렬 방법은 일반적으로 다중 열이 있는 프로젝트에서 사용됩니다. 블록 구조이므로 또 다른 다중 열 예제를 작성하고 루프를 사용하여 여러 데이터를 바인딩합니다

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:{
　　　　&#39;word-v-middle&#39;:wordMiddle
　　}
})

로그인 후 복사

효과는 위 코드에서 CSS와 같습니다. 부분은 코드를 병렬로 만드는 것입니다. 4개의 열, v-for 메소드는 HTML에서 데이터를 루프하는 데 사용되며 루프의 데이터 출력은 구성 요소의 data='aaa'를 통해 수신되며 데이터 소스는 다음과 같습니다. 실제 프로젝트에서는 사이트의 데이터를 배경에 의한 배열 출력으로 대체하여 배경 데이터 바인딩을 달성할 수 있습니다.