<!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. swift-分支

    swift相当于OC的比较 if后的括号可以省略 if后只能接bool值 if后的大括号不能省略 let num1 = 5.0 let num2 = 4.0 let boo :Bool = true ...

  2. 如何用Github版本控制非Github库

    Git的图形化客户端有很多,不同的人可能习惯用不同的客户端.本人更习惯于Github的客户端,因为上Github比较多,同步代码到Github用官方的客户端是最方便的,所以也就更习惯于使用Github ...

  3. css:overflow属性妙用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. lucky 的 时光助理（2）

    lucky小姐说:昨天晚上他喝醉了,发消息说他想我了,说他后悔了. 我很惊讶. 我问lucky:你们很久都没有联系, 突然说... 你怎么想. 没错,'他'就是lucky的前男友. lucky看着我, ...

  5. java在类定义时对hashset的便捷初始化方法

    有时候我们在类成员定义时,当这个类成员类型为 HashSet时,我们可以不方便调用 add函数进行初始化,所以可以采用下面的便捷方式来进行初始化 public class MyTest{ final ...

  6. spring 事务回滚

    1.遇到的问题 当我们一个方法里面有多个数据库保存操作的时候,中间的数据库操作发生的错误.伪代码如下: public method() { Dao1.save(Person1); Dao1.save( ...

  7. Linux下的TeXlive 2015 中文问题

    Update: 今日突然发现,我的xeLaTeX编译生成的pdf中文字在TeXMaker内置viewer.evince下查看均无法显示中文,中文字显示为空白,英语正常:但FireFox.Chrome浏 ...

  8. MMORPG大型游戏设计与开发（服务器 AI 事件）

    AI中的事件与场景中的事件大致相同,都是由特定的条件触发的.只不过AI的事件与其他事件不同的是,对于AI的事件往往是根据不同的AI类型,和动态的触发条件下才产生的.其实不管AI多么智能,它对应的触发条 ...

  9. 使用DFA做文本编辑器的自动提示

    之前看龙书的时候,龙书提到可以在编译器里用动态的生成的NFA自动机来动态匹配自己的输入串,NFA的简单实现其实写起来非常简单,但是我是实际凭感觉写完之后,却觉得并不是非常的好用,在处理自己已经输入过的 ...

  10. 跳跃的舞者，舞蹈链（Dancing Links）算法——求解精确覆盖问题

    精确覆盖问题的定义:给定一个由0-1组成的矩阵,是否能找到一个行的集合,使得集合中每一列都恰好包含一个1 例如:如下的矩阵 就包含了这样一个集合(第1.4.5行) 如何利用给定的矩阵求出相应的行的集合 ...