<!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. VMware中CPU分配不合理以及License限制引起的SQL Scheduler不能用于查询处理

    有一台SQL Server(SQL Server 2014 标准版)服务器中的scheduler_count与cpu_count不一致,如下截图所示: SELECT  cpu_count ,      ...

  2. 终于将rsync-3.1.2配置成功，之外还挖掘了一些新的用法

    1.为什么要用rsync: 有两台主机,开始准备做HA,考虑到工作量的问题,最终决定将重要文件进行同步即可. 找了一些同步的工具,rsync得到一致好评,速度快,消耗小等等. 2.接着找资料,最后选用 ...

  3. ASP.NET Cookie（二）－－控制Cookie的范围

    默认情况下,一个站点的全部Cookie都一起存储在客户端上,而且所有Cookie都会随着对该站点发送的任何请求一起发送到服务器.也就是说,一个站点中的每个页面都能获得该站点的所有Cookie.但是,可 ...

  4. MYSQL数据库的优化

    我们究竟应该如何对MySQL数据库进行优化?下面我就从MySQL对硬件的选择.MySQL的安装.my.cnf的优化.MySQL如何进行架构设计及数据切分等方面来说明这个问题. 服务器物理硬件的优化 在 ...

  5. 64位下pwntools中dynELF函数的使用

    这几天有同学问我在64位下怎么用这个函数,于是针对同一道题写了个利用dynELF的方法 编译好的程序 http://pan.baidu.com/s/1jImF95O 源码在后面 from pwn im ...

  6. ASP.NET中将导出的数据以UTF-8编码方式进行存储

      Response.Charset = "UTF-8"; Response.ContentEncoding = Encoding.UTF8; Response.AppendHea ...

  7. C# 多线程之Task资料

    博客 Stephen Toub From MicroSoft Crop. Stephen Cleary Parallelism in .NET   文章 It's All About the Sync ...

  8. monkey之monkey命令详解

    四大类-- 常用选项.事件选项.约束选项.调试选项 1.常用选项 --help:打印帮助信息 -v:指定打印信息的详细级别,一个-v增加一个级别 ,默认级别为 0 .用于指定反馈信息级别(信息级别就是 ...

  9. Django之Model操作

    Django之Model操作 本节内容 字段 字段参数 元信息 多表关系及参数 ORM操作 1. 字段 字段列表 AutoField(Field) - int自增列,必须填入参数 primary_ke ...

  10. 解读ASP.NET 5 & MVC6系列（15）：MvcOptions配置

    程序模型处理 IApplicationModelConvention 在MvcOptions的实例对象上,有一个ApplicationModelConventions属性(类型是:List<IA ...