本文摘自PHP中文网,作者coldplay.xixi,侵删。
vue.js中让文字居中的方法:首先把css部分拿下来封装成一个Vue组件,并实例化;然后给组件绑定动态的数据;最后接收数据并把数据绑定到内容中。
【相关文章推荐:vue.js】
vue.js中让文字居中的方法:
首先我们先把css部分拿下来
css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .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;
}
|
上边就是组件的核心css,也就是使文字上下居中的css,接下来我们先把它封装成一个Vue组件
html部分
1 | <p class = "word-v-middle" ><span>文字内容</span></p>
|
我们先把这部分注册成一个组件,这里使用的是组件的局部注册方法
1 2 3 | var wordMiddle = {
template: '<p class="word-v-middle"><span>文字内容</span></p>' ,
};
|
之后实例化
html:
1 2 3 | <div id= "exp" >
<word-v-middle></word-v-middle>
</div>
|
js:
1 2 3 4 5 6 | new Vue({
el: "#exp" ,
components:{
'word-v-middle' :wordMiddle
}
});
|
这样第一步就算完成了效果图如下
第二步我们来给组件绑定动态的数据,我们先在组件注册的时候添加一个props方法,让组件可以接受数据,之后使用data方法来为组件添加数据
1 2 3 4 5 6 7 8 9 | var wordMiddle = {
template: '<p class="word-v-middle"><span>{{msg}}</span></p>' ,
props:[ 'data' ],
data: function (){
return {
msg:this.data
};
}
};
|
这样我们的组件就可以接收数据并把数据绑定到内容中,实例化时的代码也要对应的改变一下
阅读剩余部分
相关阅读 >>
vue.js怎么引入外部js
vue.js怎么样显示时间
vue.js需要js吗
vue.js怎么实现页面传值
vue.js中如何定义全局变量
如何启动vue.js项目
vue.js路由this.route.push跳转页面不刷新怎么办
vue.js如何判断输入是否为数字
如何做到刷新vue.js改变数据
vue.js图片怎么渲染
更多相关阅读请进入《vue.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue.js中如何让文字居中