<div> <nav aria-label="An example with pagination"> <ul> <li v-for="page in totalPages" v-bind:class="[pageItemClass, (page === currentPage) ? activeClass : '']"> <a href="#" >{{ page }}</a> </li> </ul> </nav> </div>
和上一个示例的区别就是类绑定上使用数组。这种替代方法需要在 data 对象中添加两个额外的属性。这两个属笥是 pageItemClass 和 activeClass 。更新Vue初始化的代码：
var app = new Vue({ el: '#myApp', data: { totalPages: 5, currentPage: 3, pageItemClass: 'page-item', activeClass: 'active' } });
正如你看到了， data 对象变了，虽然 data 对象大小变大了，但是使用数组语法时，模板中的代码稍微干净一些。对象语法更紧凑一些。
对象语法和数组语法之间的选择归结为个人爱好。
这两种方法都可能使你的HTML模板更加复杂。然而，实际上还有更多的事情发生。在实现中，我们正在关注如何分离。我们正在创建一个由数据驱动的模板。这使用的视图更容易测试，并且在应用程序变大时更容易维护。
总结
我希望你觉得这篇文章很有价值。如果你想了解更多关于Vue的知识。我希望你能看看我创建的 教程 。我相信你会发现它很有价值，不管你是刚学习Vue还是使用Vue工作了一段时间。如果你觉得有什么不对，或者有更好的经验或建议，欢迎在下面的评论中与我一起分享。
本文根据 @Chad Campbell 的《 Conditionally Applying a CSS Class in Vue.js 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处: https://www.sitepoint.com/conditionally-applying-css-class-vue-js/ 。