小编abh*_*jaj的帖子

我是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>