当前第2页 返回上一页
html部分
1 2 3 | <div id="exp">
<word-v-middle :data='aaa' ></word-v-middle>
</div>
|
js部分
1 2 3 4 5 6 7 8 9 | new Vue({
el:"#exp",
data:{
aaa:'hello',
},
components:{
'word-v-middle':wordMiddle
}
})
|
到这里单个动态数据的组件以及完成了，但项目中用到这种对齐方式的一般都是多列的块结构，所以我们再写一个多列的例子，并使用循环绑定多个数据
css部分
1 2 3 4 5 6 7 8 | #example2{
width: 100%;
overflow: hidden;
}
#example2 div{
float: left;
width: 25%;
}
|
html部分
1 2 3 4 5 | <div id="example2">
<div v-for='aaa in sites'>
<word-v-middle :data='aaa' ></word-v-middle>
</div>
</div>
|
js部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | new Vue({
el:"#example2",
data:{
sites:[
"洗发水洗发水洗发水",
"洗发水洗发水",
"洗发水洗发水洗发水洗发水洗发水",
"洗发水洗发水",
]
},
components:{
'word-v-middle':wordMiddle
}
})
|
效果如上图，上述代码中，css部分是为了让代码为并列的四列，html中使用v-for方法循环数据，在组建内通过:data='aaa'接收循环输出的数据，而数据的来源是父元素实例化中的data内的名为sites的数组，在实际项目中，把sites内的数据换成后台输出的数组就可以实现后台数据的绑定。
相关免费学习推荐：javascript（视频）
以上就是vue.js中如何让文字居中的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
vue.js一般用在什么地方
vue.js页面间如何实现传值
vue.js中使用插槽将数据从父组件传递到子组件
5个好用的vue.js库推荐
html怎么让图片居中
vue.js的select下拉框怎样绑定事件和取值
vue.js中使用动态组件的方法
引vue.js和安装有什么区别
安装vue.js需要安装什么
vue.js中怎么添加图片
更多相关阅读请进入《vue.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » vue.js中如何让文字居中
