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}"。如果"className"为{{1}，则此指令（就像您编写它的方式）将名称为className（字面意思是，而不是变量isLoading的值）的类切换到您的元素}。如果是true，则不会指定任何类。

查看您的代码，您似乎确实尝试根据false的值设置两个不同的类。最简单的方法是使用isLoading。看一下工作示例here。

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

Answer 2

你不能拥有className以及变量名，因为vue期望它是实际的CSS类，documentation建议更多的方法，让类对象如下：

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


<div id="root">
  <button type="button" v-bind:class="classObj" v-on:click="toggleClass">Toggle Me</button>
</div>

Vuejs动态切换类在Laravel Blade Template中不起作用

2 个答案: