筛选练习参考答案

使用 Vue 的动态样式绑定,并且根据 intention 的值来决定是否需要给相应的按钮绑定样式,代码如下:

<span>筛选:
    <input type="button"
           value="全部"
           v-bind:class="{selected: intention==='all'}"
           @click="intention='all'"/>
    <input type="button"
           value="进行中"
           v-bind:class="{selected: intention==='ongoing'}"
           @click="intention='ongoing'"/>
    <input type="button"
           value="已完成"
           v-bind:class="{selected: intention==='completed'}"
           @click="intention='completed'"/>
</span>

注意各个按钮的 v-bind:class="{selected: intention==='xxx'}" ,点击哪个按钮,intention 就被赋予相应的值,从而被点击的按钮的 class 会被设置为红色。

-- EOF --

最后更新:2019年3月17日 01:25