[关闭]
@lizlalala 2016-09-06T15:12:26.000000Z 字数 1983 阅读 1193

vue 数据绑定

vue


react的项目结完最近又来了一个可视化的需求,在热力图上定制。好奇宝宝一直想知道angular跟vue的数据绑定跟react有什么区别,就试着上手了下vue,结果有点坑的是,公司的版本是0.12的,有些语法跟1.0的还不一样,比如v-repeat啥的,class的动态绑定比较鸡肋etc...害的我调了半天摔...

下面就来个demo把。
vue实例demo

vue实例demo@luchenCodePen

为什么jsfiddle经常挂= =,作业部落的markdown居然不能支持codepen直接嵌入html...就勉强戳链接看下啦。


截图

  1. //html
  2. <h3>测试部分</h3>
  3. <div id="app">
  4. vue 0.12版本的class绑定<br>
  5. {{customClass?customClass+' red':"red"}}
  6. <div class="{{customClass?customClass +' red':'red'}}">class test</div>
  7. </div>
  8. <h3>实例demo</h3>
  9. <ul v-show="isChaoxi" class="target-wrapper clearfix">
  10. <li v-repeat="product in productLines" class="{{'sm-box-item '+product.customClass}}" v-on="click:changeProduct(product.name)">
  11. <span class="box-item-data">{{product.data}}</span>
  12. <span class="box-item-name">{{product.zh_name}}</span>
  13. </li>
  14. </ul>
  1. //css
  2. .red{
  3. color:red;
  4. }
  5. .box-border{
  6. border:1px solid black;
  7. }
  8. .target-wrapper{
  9. list-style:none;
  10. display: flex;
  11. margin-left: -10px;
  12. }
  13. .sm-box-item{
  14. flex: 1;
  15. margin-left: 10px;
  16. padding: 10px 20px;
  17. height: 78px;
  18. box-sizing: border-box;
  19. font-size: 18px;
  20. color: #fff;
  21. cursor: pointer;
  22. }
  23. .box-item-data,.box-item-name{
  24. width: 100%;
  25. display: block;
  26. }
  27. .box-item-data{
  28. text-align: left;
  29. font-size: 20px;
  30. }
  31. .box-item-name{
  32. text-align: right;
  33. font-size: 16px;
  34. }
  35. .chaoxi{
  36. background-color: #fd6252;
  37. }
  38. .kuaiche{
  39. background-color:#54c3bc;
  40. }
  41. .taxi{
  42. background-color: #106ed5;
  43. }
  44. .sfc{
  45. background-color: #00cd99;
  46. }
  47. .zhuanche{
  48. background-color: #9587e9;
  49. }
  1. //javascript
  2. var testVue = new Vue({
  3. el:"#app",
  4. data:{
  5. show:false,
  6. customClass:"box-border",
  7. test:"test"
  8. }
  9. });
  10. var demoVue = new Vue({
  11. el:".target-wrapper",
  12. data:{
  13. isChaoxi:true,
  14. productLines: [
  15. {data:'10000',zh_name:"潮汐",customClass:'chaoxi'},
  16. {data:'30000',zh_name:"出租车",customClass:'taxi'},
  17. {data:'8000',zh_name:"快车",
  18. customClass:'kuaiche'},
  19. {data:'200',zh_name:"专车",customClass:'zhuanche'},
  20. {data:'100',zh_name:"顺风车",customClass:'sfc'}
  21. ]
  22. }
  23. });

关于set,需要注意的是

  1. editVobj.$set("fenceName",this.name);
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注