var Filter = Vue.extend({
  props:['filter'],
  template:'<div class="panel-heading"><input v-model="filter" class="form-control" placeholder="请输入筛选条件"></div>'
})

var Table = Vue.extend({
  props:['list'],
  template:'<span v-text="list"></span><table class="table table-striped"><thead><tr><th><input type="checkbox" /></th><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr v-for="user in list | filterBy filter"><td><input type="checkbox" /></td><td v-text="$index+1"></td><td v-text="user.name"></td><td v-text="user.gender"></td><td v-text="user.age"></td></tr></tbody></table>'
})

Vue.component('filter', Filter)
Vue.component('table', Table)

var Demo = new Vue({
  el:'#demo',
  data:{
    filter:"",
    list:[
      {name:"张三",gender:"男",age:"18"},
      {name:"李四",gender:"男",age:"28"},
      {name:"王五",gender:"女",age:"38"},
    ]
  },
  template:'<div><filter v-bind:filter="filter"><table v-bind:list="list"></div>'
})