Vue.js写个查询功能
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- // v-model ：在表单控件元素（input等）上创建双向数据绑定（数据源）-->
请输入查询关键字：<input type="text" v-model="search" />
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for='x in list'>
<td>{{x.name}}</td>
<td>{{x.sex}}</td>
<td>{{x.age}}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
/*数组装de 信息*/
info:[
{
'name':'智子',
'sex':'女',
'age':'18'
},
{
'name':'王静云',
'sex':'女',
'age':'19'
},
{
'name':'王云',
'sex':'女',
'age':'20'
},
{
'name':'张三',
'sex':'男',
'age':'22'
},
{
'name':'李四',
'sex':'男',
'age':'22'
},
{
'name':'王五',
'sex':'男',
'age':'18'
},
{
'name':'赵璐',
'sex':'女',
'age':'18'
},
{
'name':'李文',
'sex':'女',
'age':'22'
},
{
'name':'海翔',
'sex':'女',
'age':'21'
}
],
/*定义变量装查询输入的字符串*/
search:''
},
/*computed比methods效率高，不需要重新渲染页面*/
computed:{
// 计算属性（过滤） 查询功能
list:function(){
let arr =[];
let _this = this
for(let i=0;i<_this.info.length;i++){
// console.log(_this.info.length)
if(this.info[i].name.indexOf(_this.search)!=-1){
arr.push(_this.info[i])
}
}
return arr;
}
}
})
</script>
</body>
</html>
2726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
