<!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>
<!-- component template -->
<script type="text/x-template" id="grid-template">
       <tr>
       <td >
          {{temp}}
        </td>
        <td >
          {{name}}
        </td>
         <td >
          {{power}}
        </td>
        <td >
         {{product.price}}
        </td>
        <td >
          {{product.stock}}
        </td>
        <td >
          {{product.limitmount}}
        </td>
        <td >
            <demo-select :data="select1"   :list="list" :data2="select2"  :data3="select3"  :product.sync="product"></demo-select>
            
        </td>
      </tr>
</script>

<script type="text/x-template" id="select-template">
         <select v-model="selected" value="{{product.price}}">
            <option v-for="standar in data " v-on:click="notify(product,list)">{{standar}}</option>
         </select>
         <select v-model="selected2" >
            <option v-for="standar in data2 " v-on:click="notify(product,list)">{{standar}}</option>
         </select>
         <select v-model="selected3" >
            <option v-for="standar in data3 " v-on:click="notify(product,list)">{{standar}}</option>
         </select>
</script>
<!-- 子组件模板 -->
<template id="child-template">
  <input v-model="msg">
  <button v-on:click="notify">Dispatch Event</button>
</template>

<!-- 父组件模板 -->
<div id="events-example">
  <p>Messages: {{ messages | json }}</p>
  <child></child>
</div>

<!-- demo root element -->
<div id="demo">

<table>
    <thead>
      <tr>
       <th >
          temp
        </th>
        <th >
          name
        </th>
        <th>
          power
        </th>
        <th>
         price
        </th>
        <th>
          stock
        </th>
        <th>
          limitmount
        </th>
        <th >
            list
        </th>
      </tr>
    </thead>
    <tbody>
     
    </tbody>
  </table>
   <demo-grid   v-for="data in gridData"  :temp="data.temp" :name="data.name" :power="data.power" :list="data.datalist"
   :select1="data.list" :select2="data.list2" :select3="data.list3" :product="data.datalist[0]" ></demo-grid>
</div>

<div id="dr01"></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>

vue 组建实现数据的双向绑定的更多相关文章

  1. vue.js--基础 数据的双向绑定

    所谓双向绑定:就是改变modle,就会改变view,改变view,也会改变modle 下面案例,点击getMthod(),获取msg的内容,在点击setMthod()改变msg的内容,你会发现H1的值 ...

  2. vue 父子组件数据的双向绑定大法

    官方文档说明 所有的 prop 都使得其父子 prop 之间形成了一个 单向下行绑定 父级 prop 的更新会向下流动到子组件中,但是反过来则不行 2.3.0+ 新增 .sync 修饰符 以 upda ...

  3. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  4. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  5. VUE JS 使用组件实现双向绑定

    1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...

  6. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  7. JavaScript实现数据的双向绑定

    接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...

  8. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  9. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

随机推荐

  1. android AsynTask处理返回数据和AsynTask使用get,post请求

    Android是一个单线程模型,Android界面(UI)的绘制都只能在主线程中进行,如果在主线程中进行耗时的操作,就会影响UI的绘制和事件的响应.所以在android规定,不可在主线中进行耗时操作, ...

  2. Android Weekly Notes Issue #227

    Android Weekly Issue #227 October 16th, 2016 Android Weekly Issue #227. 本期内容包括: Google的Mobile Vision ...

  3. 时间戳TimeStamp处理

     我获得这个时间戳是得想除以1000再处理的,看看你们的需要先除多少再处理 //时间戳处理 NSInteger time = timeStamp / 1000; NSNumber *timer = [ ...

  4. React Native知识10-ListView组件

    ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据 ...

  5. 了解JavaScript 对象属性的标签

    对象属性的标签 value(属性值), writable(属性可写), enumerable(属性可枚举), configurable(属性可配置), 这些属性标签使对象所持有的属性体现出不同的特性, ...

  6. Oracle update和order by

    今天遇到一个关于SQL转换成Oracle语句的问题,描述如下: select * from emp order by deptno; select * from dept; Sql Server: u ...

  7. Web系统性能测试术语简介

    并发用户 并发一般分为两种情况.一种是严格意义上的并发,即所有的用户在同一时刻做同一件事情或者操作.这种操作一般指做同一类型的业务,比如在信用卡审批业务中,一定数目的用户在同一时刻对已经完成的审批业务 ...

  8. zabbix 中监控windows 的typepref中的值

    监控项:typepref -qx在zabbix中实现: 1.测试zabbix-get 获取数据: /usr/local/zabbix/bin/zabbix_get -s 192.168.1.3 -p1 ...

  9. WPF 自定义搜索框

      控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...

  10. Ural 1225. Flags 斐波那契DP

    1225. Flags Time limit: 1.0 secondMemory limit: 64 MB On the Day of the Flag of Russia a shop-owner ...