Question

我有一个已成功更改的按钮，以便在单击时可以调用一个函数

pauseEvent() {
      console.dir('paused');
    },

问题是我无法获得用于颜色和文本更改的功能。我已经将其扩展到至少单击控制台时的控制台日志触发器，并且可以正常工作。我应该如何正确设置，以便单击将在当前状态和另一种颜色为红色且文本为“恢复事件”的状态之间切换？

FluentQuery query = FluentJPA.SQL((User u) -> {

    UserIdCount sub = subQuery((UserLog log) -> {
        int count = alias(COUNT(log.getUserId()), UserIdCount::getCount);
        SELECT(log.getUserId(), count);
        FROM(log);
        ORDER(BY(count).DESC());
        LIMIT(5);
    });

    SELECT(u.getName(), sub.getCount());
    FROM(u).JOIN(sub).ON(u.getId() == sub.getUserId());
});

return query.createQuery(em, UserNameCount.class).getSingleResult();

Answer 1

<button class="btn btn-primary btn-block" :style="{ 'background-color': color }" v-on:click="pauseEvent" type="button" role="button" id="" aria-expanded="false" style=" color: #6c757d border:none; border-radius: .15;">
            {{text}}
        </button>

您可以使用Vue数据功能。 Example of here

        data(){
            return {
                color: 'green',
                text: 'Started'
            }
        },
        methods: {
           pauseEvent() {
               this.color = 'red';
               this.text = 'Paused';
           },
        }

单击时Vue切换按钮的颜色和文本

1 个答案: