<!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中的自定义控件（一）

    自定义控件是根据自己的需要自己来编写控件.安卓自带的控件有时候无法满足你的需求,这种时候,我们只能去自己去实现适合项目的控件.同时,安卓也允许你去继承已经存在的控件或者实现你自己的控件以便优化界面和创 ...

  2. iOS提交AppStore后申请加急审核

    提交审核后进去下面链接申请加急审核链接:https://developer.apple.com/appstore/contact/appreviewteam/index.html 在I would l ...

  3. html img图片等比例缩放

    在img标签里面只设置宽,不设置高,图片就会等比例缩放.

  4. SQL Server快速查询某张表的当前行数

    传统做法可能是select count(1) 但是往往会比较慢.推荐如下做法: ) CurrentRowCount FROM sys.sysindexes WHERE id = OBJECT_ID(' ...

  5. MVC 后台管理框架 FineUIMvc 在线示例

     FineUIMvc 在线示例 基础版下载

  6. mysql想要别人远程能连接

    mysql -u root -pvmware mysql>use mysql; mysql>update user set host = '%' where user = 'root'; ...

  7. python-函数

    函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函数,这 ...

  8. Windows下Java环境配置，tomcat安装

    问题描述:在Windows下面做Java web相关的项目的时候,Java和tomcat是基础,这里记载一下Java环境的配置以及tomcat的安装和配置. 使用工具:Windows.jdk安装包.t ...

  9. jni操作jobject

    一. 注册JNI函数 1.         静态方法 一般使用javah进行编译,生成很长的文件名和函数名字,这个书写不方便,影响运行效率. 2.         动态注册 使用JNINativeMe ...

  10. CFD冲蚀模拟的一些理论

    [TOC] 在CFD中计算颗粒对固体壁面的冲蚀往往采用冲蚀模型(Erosion Model). 1 冲蚀速率(Erosion Rate) 冲蚀速率定义为壁面材料在单位时间单位面积上损失的质量(单位:\ ...