筛选练习参考答案

227 0 2019年1月14日

使用 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 --

最后更新:2018-11-11 12:21:12

0 条评论 / 0 人参与