vue.js （渐进过渡） 

 1 <html>
 2 <head>
 3 <script src="lib/vue.js"></script>
 4 </head>
 5 <body>
 6 <div id="demo">
 7     <input v-model="query">
 8     <ul>
 9         <li v-for="item in list | filterBy query"
10             transition="staggered"
11             stagger="100"> //延时
12           {{item.msg}}
13          </li>
14     </ul>
15 </div>
16 </body>
17 </html>
 1 window.onload=function(){
 2  //在这里面写Vue.js代码
 3  new Vue({
 4     el: '#demo',
 5     data: {
 6         query: '',
 7         list: [
 8             { msg: 'Bruce Lee' },
 9             { msg: 'Jackie Chan' },
10             { msg: 'Chuck Norris' },
11             { msg: 'Jet Li' },
12             { msg: 'Kung Fury' }
13         ]
14     }
15 })
16  //----------------
17 }
 1 ul {
 2     padding-left: 0;
 3     font-family: Helvetica, Arial, sans-serif;
 4 }
 5 .staggered-transition {
 6     transition: all .5s ease;
 7     overflow: hidden;
 8     margin: 0;
 9     height: 20px;
10 }
11 .staggered-enter, .staggered-leave {
12     opacity: 0;
13     height: 0;
14 }

//根据input输入内容，筛选li中符合条件的信息；filterBy为内置筛选器。

 

posted @ 2017-02-08 09:14  米修^~^  阅读(562)  评论(0)  编辑  收藏  举报