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