用Vue实现一个To Do List项目（二）

这里较上一篇《用Vue实现一个To Do List项目》内容，做了一下更新：

那么下面还是来分享一些技术点。

增加颜色选择

使用到的API任然是v-for、v-bind、v-on来控制数据。并且将监听来的数据存入data中。

使用一个flag来控制当前选中的颜色。

这里用到了v-if而不是v-show，因为我觉得不是每个<input>标签都需要被一次性编译的，虽然这个项目小，但是思路不能错。

这里在调整CSS样式的时候使用到了calc()一个CSS样式值得计算功能。并且也隐藏了文本超出的部分。

首先依赖awe-dnd。此插件很方便，直接按照官网DOC进行配置即可使用。

我自己也思考过如何去实现一个拖拽功能，思路一个就是直接操纵数据来改变页面内容，但是没想过drag和drop的使用。这个待我更熟悉Vue的时候，再尝试吧，但是我觉得这个思路是没有错的。

移除了之前固定的布局模式，调整为Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。

用法就是很无脑的这么一套

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

同样也是简单的一套，但是值得一提的是border-bottom的样式，我这里是使用Vue的数据控制border-bottom的样式。

使用要的Vue技术是computed。

因为直译就是计算，没错就是计算，这是Vue提供的一个极赞的解决方案，在这个项目里，判断border-bottom样式的显示事件存在着两种情况，很好的解决了问题。

举个栗子：

//判断当todo顶部菜单被点击或者todo列表内是否存在内容来控制border-bottom的显示
'tabs-bottom': !this.todoflag || !this.todos.length

感谢阅读至此。