使用Vue过滤器和计算属性,分别完成一个表格的动态筛选功能,有没有大神会Vue的，帮忙看一下
使用过滤器和计算属性,完成一个表格的动态筛选功能,并且在实例对象创建之后进行对象的挂载，`<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-
·
使用过滤器和计算属性,完成一个表格的动态筛选功能,并且在实例对象创建之后进行对象的挂载
，
`
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
</div>
SearchByName:<input type="text" id="txt1" v-model="txt1" />
<table id="table1" style="width:40%;" border="1">
<tr v-for="items in stu">
<td v-if="Sum||filter1(items.Name)">{{items.Name}}</td>
<td>{{items.Gender}}</td>
<td>{{items.Age}}</td>
</tr>
</table>
<script src="scripts/vue.js"></script>
<script>
//先声明数组
var stus = [{ Name: 'Jack', Gender: 'male', Age: '26' }, { Name: 'John', Gender: 'female', Age: '20' }, { Name: 'Lucy', Gender: 'female', Age: '16' }];
var vm = new Vue({
//el: '#myVue', 挂载
data: {
stu: stus,
txt1: '请输入',
sum:0
},
//计算属性
computed: {
fun:function(){}
},
//过滤器filters
filters: {
filter1: function (sum,name) {
if(name=="Jack"){
sum: 0;
}
}
}
}).$mount('#table1');
</script>
</body>
</html>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)