<!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. CSS：@font-face的使用方法

    1.介绍 @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当 ...

  2. 编译安装mysql

    参考:http://www.centoscn.com/CentosServer/www/2015/0422/5245.html 安装mysql5.6.17 1.按照标准需要给mysql创建所属用户和用 ...

  3. 树莓派3B更新软件

    因为软件是要不断更新的,所以半个月或者一个月要升级一下软件 升级软件非常简单 在终端或者SSH里输入 sudo apt-get update && apt-get upgrade -y ...

  4. js获取页面url中的各项值

    一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location ...

  5. Centos7 升级内核和应用TCP BBR 算法

    首先确认目前使用内核 uname -r rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org rpm -Uvh http://www.e ...

  6. C#调用天气查询服务

    先引入天气查询服务 1.有点引用导入服务引用 //实例化            web引用名.WeatherWebService cn = new web引用名.WeatherWebService() ...

  7. [LeetCode] Serialize and Deserialize Binary Tree 二叉树的序列化和去序列化

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  8. IT培训行业揭秘（一）

    最近一个多月来,身边有很多朋友问我,我家孩子明年就要大学毕业了,现在工作还没有着落,最近孩子回家经常和我说,他们学校最近来了很多IT培训班,让同学们参加培训,然后各个培训班动辄拿出往届他们的培训学生赚 ...

  9. 关于 bind 你可能需要了解的知识点以及使用场景

    不看不知道,一看吓一跳,已经整整一个月没有更新 underscore 源码解读系列文章了.前面我们已经完成了 Object ,Array,Collection 上的扩展方法的源码剖析,本文开始来解读 ...

  10. 酷酷的mapv

    做城市热力图的时候无意浏览到mapv强大的功能.比如地图上路线的汇聚效果,如下 <!DOCTYPE html> <html> <head> <meta cha ...