@lizlalala
2016-09-06T15:12:26.000000Z
字数 1983
阅读 1193
vue
react的项目结完最近又来了一个可视化的需求,在热力图上定制。好奇宝宝一直想知道angular跟vue的数据绑定跟react有什么区别,就试着上手了下vue,结果有点坑的是,公司的版本是0.12的,有些语法跟1.0的还不一样,比如v-repeat啥的,class的动态绑定比较鸡肋etc...害的我调了半天摔...
下面就来个demo把。
vue实例demo
为什么jsfiddle经常挂= =,作业部落的markdown居然不能支持codepen直接嵌入html...就勉强戳链接看下啦。
//html
<h3>测试部分</h3>
<div id="app">
vue 0.12版本的class绑定<br>
{{customClass?customClass+' red':"red"}}
<div class="{{customClass?customClass +' red':'red'}}">class test</div>
</div>
<h3>实例demo</h3>
<ul v-show="isChaoxi" class="target-wrapper clearfix">
<li v-repeat="product in productLines" class="{{'sm-box-item '+product.customClass}}" v-on="click:changeProduct(product.name)">
<span class="box-item-data">{{product.data}}</span>
<span class="box-item-name">{{product.zh_name}}</span>
</li>
</ul>
//css
.red{
color:red;
}
.box-border{
border:1px solid black;
}
.target-wrapper{
list-style:none;
display: flex;
margin-left: -10px;
}
.sm-box-item{
flex: 1;
margin-left: 10px;
padding: 10px 20px;
height: 78px;
box-sizing: border-box;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.box-item-data,.box-item-name{
width: 100%;
display: block;
}
.box-item-data{
text-align: left;
font-size: 20px;
}
.box-item-name{
text-align: right;
font-size: 16px;
}
.chaoxi{
background-color: #fd6252;
}
.kuaiche{
background-color:#54c3bc;
}
.taxi{
background-color: #106ed5;
}
.sfc{
background-color: #00cd99;
}
.zhuanche{
background-color: #9587e9;
}
//javascript
var testVue = new Vue({
el:"#app",
data:{
show:false,
customClass:"box-border",
test:"test"
}
});
var demoVue = new Vue({
el:".target-wrapper",
data:{
isChaoxi:true,
productLines: [
{data:'10000',zh_name:"潮汐",customClass:'chaoxi'},
{data:'30000',zh_name:"出租车",customClass:'taxi'},
{data:'8000',zh_name:"快车",
customClass:'kuaiche'},
{data:'200',zh_name:"专车",customClass:'zhuanche'},
{data:'100',zh_name:"顺风车",customClass:'sfc'}
]
}
});
关于set,需要注意的是
在new Vue的时候没有设置的属性,是不可以用vobj.key = value来更新的。只能用$set.但是官方建议是在data中进行声明,不要动态设置。
原因有两点:
editVobj.$set("fenceName",this.name);