vue 组建实现数据的双向绑定

<!DOCTYPE html>
<html>
<head>

<style>
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 14px;
color: #444;
}

table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}

th {
background-color: #42b983;
color: rgba(255,255,255,0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-user-select: none;
}

td {
background-color: #f9f9f9;
}

th, td {
min-width: 120px;
padding: 10px 20px;
}

th.active {
color: #fff;
}

th.active .arrow {
opacity: 1;
}

.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}

.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}

.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}

#search {
margin-bottom: 10px;
}

</style>

<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

<script type="text/x-template" ></div>
</body>
</html>
<script>

// register the grid component
Vue.component('demo-grid', {
template: '#grid-template',
props: {
    temp :Number,
    name :String,
   power :String,
   list :Array,
   product:Object,
    select1: Array,
    select2: Array,
   select3: Array
      },
   methods: {
    childmsg: function (value) {
      alter(value);
    }
}
})

Vue.component('demo-select', {
template: '#select-template',
props: {
    data: Array,
   data2: Array,
   data3: Array,
    list: Array,
    type:String,
   product:Object

     },
   data: function () {


    return { selected: '',selected2: '',selected3:''

   }
     },
      methods: {
    notify: function (val,list) {
       var ishas=false;
       for(var i=0;i<list.length;i++)
       {
        var item=list[i];
       if(this.selected==item.price&&this.selected2==item.stock&&this.selected3==item.limitmount)
       {

           this.product=item;
           ishas=true;

          }

           if(!ishas)this.product='';
       }


    }
}
})

// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {

   gridData:
   [{ name: 'Chuck Norris',temp:1, power: Infinity,list:[11,12,13] ,list2:[121,122,123] ,list3:[131,132,133],datalist:[{price:11,stock:121,limitmount:131},{price:131,stock:132,limitmount:133}]},
      { name: 'Bruce Lee',temp:2, power: 9000 ,list:[21,22,23] ,list2:[221,222,223] ,list3:[231,232,233] ,datalist:[{price:121,stock:122,limitmount:123},{price:131,stock:132,limitmount:133}]},
      { name: 'Jackie Chan', temp:3,power: 7000,list:[31,32,33] ,list2:[321,322,323] ,list3:[331,332,333] ,datalist:[{price:121,stock:122,limitmount:123},{price:131,stock:132,limitmount:133}] },
      { name: 'Jet Li',temp:4,power: 8000,list:[41,42,43] ,list2:[421,422,423] ,list3:[431,432,433] ,datalist:[{price:421,stock:422,limitmount:423},{price:131,stock:132,limitmount:133}] }
    ]
}
})

</script>