console
new Vue({
el : '#demo' ,
data : {
list : [] ,
search_text : ''
},
created () {
this.get_list();
},
watch : {
search_text : function () {
this.get_list();
}
},
methods : {
get_list () {
const type = Math.floor(Math.random() * 10 + 1);
if(type < 2) {
this.list = [
'123',
'31231231',
'231313123123',
'345345454',
'53534435345',
'342342342'
]
}else if (type < 4) {
this.list = [
'aaa',
'bb',
'cc',
'ddddd',
'dfadfafadf',
'dfadfafdadfasdfasf'
]
}else if(type < 6) {
this.list = [
'llllll',
'lllll',
'llll',
'lllll',
'llllllll',
'llllllll'
]
}else if (type < 8) {
this.list = [
'eeeeeee',
'eeeee',
'eeeee',
'eeeee',
'eeeee',
'eeeee'
]
}else {
this.list = [
'tttttttttt',
'tttttttttt',
'tttttttttt',
'tttttttttt',
'tttttttttt',
'tttttttttt'
]
}
}
}
})
<div id="demo">
<input type="text" v-model="search_text" />
<ul>
<li v-for='item in list' >{{ item }}</li>
</ul>
</div>
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#demo {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}