Question

基本上，我有一个菜单按钮。默认情况下，它是false。当我点击它时，它被设置为true。

我想对marginLeft：250px应用它，如果它是真的，并返回到marginLeft：0如果它是假的但我似乎无法让我的代码完全工作。

v-bind标签应该检查isOpen是否为真，如果是，则应用＆＃34;打开＆＃34;

   <span class="open-slide" @click="openSlide()" v-bind:style="{'open': isOpen}">

const app = new Vue({
    el: '#test',
    data: {
        isOpen: false,
        moreinfo: false,
        open: {
          marginLeft:"250px"  
        },
        locations: [
            {
                name: "Europe",
                desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
                img: "img/europe.jpg",

                moreinfo: [
                    {
                        desc: "Euro desc",
                    header: "Welcome to Europe"
                    }
                ]
            },
            {
                name: "America",
                desc: "Curabitur vel lacus ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ex ante, scelerisque vitae semper ut",
                img: "https://images.fineartamerica.com/images-medium-large-5/14-american-flag-les-cunliffe.jpg",
               moreinfo: [
                    {desc: "America desc",
                    header: "Welcome to America"}
                ]
            },
            {
                name: "Scotland",
                desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
                img: "https://images-na.ssl-images-amazon.com/images/I/41VvuLQ7UhL.jpg",
                moreinfo: [
                    {desc: "Scotland desc",
                    header: "Welcome to Scotland"}
                ]
            },

        ],
        selected: location[1],
    },
        created: function(){
    this.selected = this.locations[0]
  },
    methods:{ 
        moreinfo2(location) {
        this.selected = location;
        },
        openSlide: function() {
            this.isOpen = !this.isOpen;
            if(this.isOpen){
                console.log("True")
            } else {
                console.log("False")
            }
        }
    }
})

Answer 1

问题是您使用Vue's nifty object-syntax绑定到元素style属性，其CSS样式无法识别：

<span class="open-slide" @click="openSlide()" v-bind:style="{'open': isOpen}">

open未被识别为有效的CSS规则，因此我假设您要执行的操作是绑定到class：

<span @click="openSlide()" v-bind:class="{open: isOpen, openSlide: isOpen}">

最后，不要忘记在CSS文件或内联样式标记中定义CSS选择器（包含所有规则）：

<style>
   .open {
      /* css styling goes here */
   }
</style>

我希望这有帮助！

v-bind条件为true或false不起作用

1 个答案: