javascript - Vuejs 动态切换类在 Laravel Blade 模板中不起作用

Question

我是 VueJs 的新手，因为我试图在我的 Laravel 项目中使用 VueJs 的 v-bind 属性实现基本的切换类功能。在呈现页面时，我没有获取变量 className 的值。请指导我哪里做错了。代码如下:

<div id="root">
  <button type="button" v-bind:class="{'className':isLoading}" v-on:click="toggleClass">Toggle Me</button>
</div>

JavaScript 是:

<script>
    var app = new Vue({
        el: '#root',
        data: {
            className:"color-red",
            isLoading:false
        },
        methods:{
            toggleClass(){
                this.isLoading=true;
                this.className="color-blue";
            }
        }
    })
</script>

风格是:

<style>
    .color-red{
        background-color:red;
    }
    .color-blue{
        background-color:blue;
    }
</style>

Answer 1

您稍微混合了您的方法。主要问题在 v-bind:class="{'className':isLoading}" 中。如果 isLoading 为 true。如果为 false，则不会分配任何类。

查看您的代码，您似乎实际上是在尝试根据 isLoading 的值设置两个不同的类。最简单的方法是使用 v-bind:class="isLoading ? 'color-red' : 'color-blue"。看一个工作示例 here .

一个不会用逻辑污染模板的更好的解决方案是将该表达式移动到一个计算属性，like this .