动态绑定Class和Style

将test、active、active-click三个className,绑到div上，渲染成<div class="test active active-click"></div>其中test是固定的，active受data中actived控制，active-click受data中actived和clicked控制，请用4种写法实现。

<template> <div> <!--第一种对象语法 --> <div class="test" :class="{ active: actived , 'active-click': clicked && actived }"></div> <!-- 第二种数组语法 --> <div class="test" :class="[ actived? activeClass : '', clicked && actived ? activeClickClass : '' ]"></div> <!-- 第三种对象和数组混合 --> <div :class="[ testClass , {active: actived} , {'active-click': clicked && actived} ]"></div> <!-- 第四种对象和计算属性(推荐) --> <div :class="classObject"></div> </div> </template> <script> export default { data() { return { actived: true, clicked: true, testClass: 'test', activeClass: 'active', activeClickClass: 'active-click', } }, computed: { classObject: function() { return { test: true, active: this.actived, 'active-click': this.actived && this.clicked, } } }, } </script>

 

 

作者：红尘炼心
链接：https://juejin.cn/post/6844903874709766152
来源：稀土掘金