回顾

 哈喽大家好，前后端分离系列文章又开始了，今天周一，还是感谢大家花时间来观看我写的博客，周末呢，没有写文章，但是也没有闲着，主要是研究了下遗留问题，看过之前文章的应该知道，之前的在AOP使用Redis缓存的文章里，遗留了一个问题，周末苦思冥想还是不得其法，想了一个馊主意，但是肯定不是最终解决方案，感兴趣的可以看看，地址《

 

 

一、动态绑定class和style

之前咱们都已经了解到了，Vue是通过Data来控制DOM的，这样可以减少太多的JS操作，从而达到页面的无缝快速渲染的作用，这是一个很好的想法，我们可以想一下，页面内，除了各种标签的DOM需要操作修改以外，还有哪些因素呢，不过，你应该已经想到了，就是样式！页面的三大元素：HTML+CSS+JS。我们也可以使用相同的办法，通过操作Data来控制样式！对，Vue的设计者们也考虑到了这个问题，所以就出来了动态绑定class和style。操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1、通过对象的方式动态修改页面内的 class，来实现删除效果

还记得当时我们给 a 标签是如何添加 src 的？对，就是 v-bind ，它就是用来统一操作页面内各种属性的，所以我们要修改 class 和 style 也得使用到 v-bind ，这里我们统一使用他们的缩写 （ ：），

在我们的博客首页 DEMO 中，我们都是通过这样的方法定义一个 class

  <li v-for='item in listSearch' class="post-list-item">

 

现在我们需要实现一个删除效果，那就需要给文章列表 list ，动态的增加一个 deleted 的 class ，

   <!--注意，不能在已经存在的静态类post-list-item上操作-->   <li v-for='item in listSearch' class="post-list-item" :class="{ deleted: item.deleted}">        var vm = new Vue({             el: '#app',//容器            data: {                 author: "老张的哲学",                 task: {                     name: '',//内容为空                    id: 100,                     date: " Just Now ",                     finished: false,                     deleted: false                 },                 list: [                     //假数据                    { name: " Vue前篇：ES6初体验 & 模块化编程", id: 9585766, date: "2018年9月5日", finished: 
                        
关键字：