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>
