vue 组建实现数据的双向绑定
<!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 组建实现数据的双向绑定的更多相关文章
- vue.js--基础 数据的双向绑定
所谓双向绑定:就是改变modle,就会改变view,改变view,也会改变modle 下面案例,点击getMthod(),获取msg的内容,在点击setMthod()改变msg的内容,你会发现H1的值 ...
- vue 父子组件数据的双向绑定大法
官方文档说明 所有的 prop 都使得其父子 prop 之间形成了一个 单向下行绑定 父级 prop 的更新会向下流动到子组件中,但是反过来则不行 2.3.0+ 新增 .sync 修饰符 以 upda ...
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
- JavaScript实现数据的双向绑定
接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
随机推荐
- 日期关联取最近日期的SQL
SQL怎么关联,如下图A表用日期加产品编号关联B表的时候,如果日期不存在,则取之前最近一个日期的值,比如A表2012-07-31 关联B表,B表没有对应日期的,就取2012-07-30的 A表 ...
- TextField和TextView的限制输入长度
TextField的限制代理方法 只需要在这个代理方法里面code这样的代码就可以了 16 是长度可以自己设置 - (BOOL)textField:(UITextField *)textField s ...
- jQuery解决iframe高度自适应代码
网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...
- [Erlang 0116] 当我们谈论Erlang Maps时,我们谈论什么 Part 1
Erlang 增加 Maps数据类型并不是很突然,因为这个提议已经进行了2~3年之久,只不过Joe Armstrong老爷子最近一篇文章Big changes to Erlang掀起不小了风 ...
- Select into 的特点
使用 Select * into NewTable From OldTable 来生成新表的技能已经使用得好熟练了~但是有些东西还是需要注意一下.下面我就来分享几个栗子 使用select into ...
- nginx 虚拟主机基于端口的搭建
首先配置nginx.conf [root@localhost conf]# cat nginx.confworker_processes 1;user nginx nginx;error_log /a ...
- yii2 增删改查
自己总结的yii2 advanced 版本的简单的增删改查,希望对大家有所帮助 1.gii生成的actionCreate()方法中 获取插入语句的id $id = $model->attribu ...
- 【转】XenServer架构之XAPI的调用流程
XAPI 调用是使用XML-RPC协议通过网络发送到安装有XenServer 的主机上.XAPI对象的引用不保证对象的永久标识符,引用不允许对象进行相等比较.对同一物体的两个引用,不保证是文本相同的. ...
- CodeAtlas For Sublime Text
CodeAtlas is a plugin of SublimeText, which allows one to explore the call graph conveniently. The p ...
- Linux下更换默认yum源为网易yum源的操作记录
废话不多说,下面记录了centos下更换系统默认yum源为网易yum源的操作过程:1)备份原有的默认yum源[root@bastion-IDC ~]# cp /etc/yum.repos.d/Cent ...