4.3　Boolean值的陷阱

这里介绍一个文档里没有提到的属性：vertical。这个属性将指明swiper组件面板指示点的排布方向是水平还是垂直，将vertical="true"，加入到swiper的属性中。保存后，我们发现swiper组件的面板指示点由原来的水平排布更改为垂直排布，出现在组件的右侧。

那如果把vertical属性改为false呢？形如，vertical="false"。此时，面板指示点如何排列？它依然和vertical="true"时的排列方向一样，呈垂直排布。为什么会出现这样的情况？我们可以把vertical的属性值更改为任何字符串，再看看效果。形如vertical="aaa"、vertical="bbb"等属性值都会让指示面板呈垂直分布。而vertical=" "则呈水平分布。

我们应该可以从上面的属性举例中找出原因了。即使我们将vertical的值设置为false，但这里的false并不是Boolean类型，而是一个字符串。只要不是空字符串，那么在JavaScript里都会认为这是一个true。所以，设置vertical="false"、vertical="aaa"和vertical="bbb"，效果是一样的：vertical属性被认为设置成了true。

如果想让面板指示点水平排列，有以下几种方式：

• 不加入vertical属性

• vertical=" "

• vertical="{{false}}"

以上几种写法，小程序都会认为你将vertical属性设置成了false。第三种写法，是我们后面要学习到的核心知识：数据绑定。这种写法，让{{false}}里的false被认为是一个Boolean类型的变量，而不是一个字符串，从而实现false即是假，true即是真的效果。

当然，swiper的vertical属性如果设置错误，一眼就能看出问题来。但如果是其他无法直接在UI上表现的属性出现了真假错误，就不是那么容易排查了，可能会浪费掉我们大量的时间。所有组件的Boolean类型属性都有这样的Boolean陷阱，比如，本例中的indicator-dots和autoplay也存在这个问题。