关于视频里提到的三元表达式

Question

视频7分35秒左右。这里老师说用到了三元表达式。

我想了很久…三元表达式为什么没有问号。后来想了想，这里应该是布尔值动态绑定class名的写法：

类似这样：v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB}"

嗯…其实我觉得老师说的三元表达式应该是后面HTML文本之类会用到。

做完的成品，这里的新品是这样写死在页面里的。

我把代码改了改

然后就可以根据奇偶来渲染。

后来我尝试着在v-bind:class的写法里面用三元表达式。

报错了，并且提示解析失败，class里必须是属性值。可是我想了半天还是没明白为什么会报这个错误。

运行之后的结果应该是长这样：

这行代码可以正确解析。但是为什么上面那种三元表达式的写法就不能解析？

辛苦老师回答。

Answer 1

河畔一角 2020-05-06 18:24:47

有心了，总结的很好。我回答一下你最后的问题，三元表达式没什么问题，唯一的问题在解构，你用的是{}，这是key、value解构，这样就限制你必须是一个{key:value}，而你的三元表达式渲染出来只是一个{key}，这显然不对。你改成[]就对了

• 提问者 夜魇丶 #1

  感谢，原来是这样。另外回复的好快，刚把问题发出来，站起来拿个水的功夫就回复了。感谢。