<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for的几种用法</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body class="native">
<div id="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>
