vueは検索機能を実現します。

3833 ワード
vue 検索
本論文の例では、Vueの検索機能を実現するための具体的なコードを共有します。
methods（イベントをクリックするなど、トリガ条件が必要です。）

<template>
 <div class="safetyInfo">
 <input type="text" name="" id="" placeholder="  " v-model="search"/> 
 <button @click="btn">  </button>
 <ul v-for="list in searchData">
 <li>
  <span>{{list.name}}</span>
  <span>{{list.date}}</span>
  <span>{{list.depart}}</span>
 </li>
 </ul>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
  search:'',
  searchData: '',
 products:[
  //   
  {name:"  1",date:'2018-01-04',depart:'   1'},
  {name:"  2",date:'2018-01-25',depart:'   2'},
  {name:"  3",date:'2018-02-10',depart:'   3'},
  {name:"  4",date:'2018-03-04',depart:'   4'},
  {name:"  5",date:'2018-05-24',depart:'   5'},
  {name:"  6",date:'2018-10-29',depart:'   6'}
  ]
 }
 },
 methods:{
 btn:function(){
 
 var search = this.search;
 if (search) {
 this.searchData = this.products.filter(function(product) {
  console.log(product)
 return Object.keys(product).some(function(key) {
  console.log(key)
  return String(product[key]).toLowerCase().indexOf(search) > -1
 })
 })
 }
 
 }
 }
}
</script>
computed（HTML DOMでロードした後、直ちに実行されるのは、賦値のようなもの）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 
<div id="app">
<input v-model='search' />
<ul v-for="item in searchData ">
<li>{{item.name}},  :￥{{item.price}}</li>
</ul>
</div>
 
 
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
products: [{
name: '  ',
price: 25,
category: "  "
}, {
name: '  ',
price: 15,
category: "  "
}, {
name: '  ',
price: 65,
category: "  "
}, {
name: '  ',
price: 2500,
category: "  "
}, {
name: '  ',
price: 10025,
category: "  "
}, {
name: '  ',
price: 15,
category: "  "
}, {
name: '  ',
price: 25,
category: "  "
}]
},
computed: {
searchData: function() {
var search = this.search;
 
if (search) {
return this.products.filter(function(product) {
return Object.keys(product).some(function(key) {
return String(product[key]).toLowerCase().indexOf(search) > -1
})
})
}
 
return this.products;
}
}
})
</script>
 
 
</body>
</html>
注：some()は配列中の各要素に一回のカルバー関数を実行します。戻り値がブール値trueに変換できる値を見つけるまで、その時some()方法は直ちにtrueに戻ります。そうでないとfalseに戻ります。 
by the way:
ウォッチ Vueのインスタンス上のデータの変動を観察するのに使います。オブジェクトに対応して、キーは観察式で、値は反転に対応します。値は、メソッド名またはオブジェクトであってもよいし、オプションが含まれています。
デフォルトでロードする時にまずcomputedからwatchを実行しないという手順です。ある事件をきっかけにしたら、まずmethodsからウォッチ。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
php操作SVNバージョンサーバコード
PHP中に改行解決方法の結節を除去する（PHP_EOL）