vue權威指南筆記03——v-for的幾種用法
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-for的幾種用法</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body class="native"> <divid="app"> <h3>1.基礎用法：遍歷陣列列表</h3> <ol> <li v-for="(item,index) in items"> 姓名:{{item.name}}; 年齡：{{item.age}}; key：{{index}} </li> </ol> <h3>2.特殊情況：遍歷整數(用於資料的自定義顯示，如不顯示第一列)</h3> <ul> <li v-for="(item,index) in 5"> 整數:{{item}}; key：{{index}} </li> </ul> <h3>3.過濾屬性：filterBy</h3> <div> <ul> <h4>1.自定義過濾：轉換成大寫</h4> <li v-for="item in items ">{{item.cname | capitalize}}</li> <h4>2.過濾引數：filter</h4> <input type="text" id="searchText" placeholder="搜尋年齡或者姓名" v-model="searchText" /> <li v-for="item in items">{{item.age | searchData(item.name, searchText)}}</li> </ul> </div> </div> </body> <script> var demo = new Vue({ el: '#app', data: { items: [{ name: '張三', age: '12', cname: 'zhangshang' }, { name: '李四', age: '18', cname: 'lisi' }, { name: '王五 ', age: '20', cname: 'wangwu' }], searchText: '', }, filters: { capitalize: function(value) { if (!value) return '' value = value.toString() return value.toUpperCase(); //toLowerCase() }, searchData: function(a,b,c) { console.log(a,b,c,"過濾器函式可接收多個引數") return b }, }, watch: { searchText: { handler: function(val, oldval) { console.log(val,oldval,"搜尋的值") }, deep: true } }, }) </script> </html>