1.png
css部分
<style type="text/css">
*{margin: 0;padding: 0;}
p{font-size: 14px;}
li{list-style: none;padding: 10px 20px;border-left: 2px solid #999;position: relative;}
li:before{content: "";width: 10px;height: 10px;display: block;background: lightblue;position: absolute;left: 0;top: 0;margin-left: -6px;border-radius: 50%;}
ul{width: 300px;margin: 0 auto;}
</style>
html部分
<div id="app">
<ul>
<li v-for="item in myData"><p v-text="item"></p></li>
</ul>
</div>
js部分
var vm = new Vue({
data: {
myData: [
'我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
'我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
'我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
'我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
'我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
'我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
'我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条',
'我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条我是竖向流程条'
]
}
}).$mount('#app')
