筛选练习参考答案_Vue 2.x Todo 教程练习参考答案

筛选练习参考答案

1 月，1 周前

825 字

158 阅读

0 评论

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

筛选练习参考答案

0 条评论 / 0 人参与