Html v-bind条件为真或假不工作

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

如果为真，我想对其应用marginLeft:250px样式，如果为假，则返回marginLeft:0样式，但我似乎根本无法让代码正常工作

v-bind标记应检查isOpen是否为真，如果为真，则应用“open”

const app=新的Vue({
el:'测试'，
数据：{
伊索彭：错，
错误，
开放式：{
边缘左侧：“250px”
},
地点：[
{
名称：“欧洲”，
描述：“非普尔文主义精英的阶段性特征。爱神的阶段性特征。莫里斯·米·奥迪奥的阶段性特征，欧洲的阶段性特征，新的交通工具。”，
img：“img/europe.jpg”，
更多信息：[
{
描述：“欧洲描述”，
标题：“欢迎来到欧洲”
}
]
},
{
名称：“美国”，
描述：“从同侧到同侧的Curabitur vel lacus ipsum.Orci varius natoque penatibus et magnis dis-parturint montes，nascetur ridiculus mus.Mauris pre-ante，scelerisque vitae semper ut”，
img:“https://images.fineartamerica.com/images-medium-large-5/14-american-flag-les-cunliffe.jpg",
更多信息：[
{desc:“美国desc”，
标题：“欢迎来到美国”}
]
},
{
姓名：“苏格兰”，
描述：“非普尔文主义精英的阶段性特征。爱神的阶段性特征。莫里斯·米·奥迪奥的阶段性特征，欧洲的阶段性特征，新的交通工具。”，
img:“https://images-na.ssl-images-amazon.com/images/I/41VvuLQ7UhL.jpg",
更多信息：[
{desc:“苏格兰desc”，
标题：“欢迎来到苏格兰”}
]
},
],
所选：位置[1]，
},
已创建：函数（）{
this.selected=this.locations[0]
},
方法：{
moreinfo2（位置）{
此项选择=位置；
},
openSlide:function（）{
this.isOpen=！this.isOpen；
if（this.isOpen）{
console.log（“True”）
}否则{
console.log（“False”）
}
}
}
})

问题在于，您正在使用无法识别的CSS样式绑定到元素

样式

属性：

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

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

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

.打开{
/*css样式在这里*/
}

---

我希望这有帮助

问题在于，您正在使用无法识别的CSS样式绑定到元素

style

属性：

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

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

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

.打开{
/*css样式在这里*/
}

---

我希望这有帮助

我相信这是向后的

“open”：isOpen

，open是一个带有字符串值的变量，因为isOpen是一个用于条件语句的布尔值，将isOpen放在第一位。似乎您需要的是bind类而不是样式。因此，用

marginLeft:250px

创建一个css class=“open”，然后

v-bind:class=“{'open'：isOpen}”

我的答案是你在寻找的@DonnieBerry？对不起，是的，我会更正它我相信这是向后的

“open”：isOpen

，open是一个带有字符串值的变量，因为isOpen是一个用于条件语句的布尔值。将isOpen放在第一位似乎您需要的是bind类而不是样式。因此，用

marginLeft:250px

创建一个css class=“open”，然后

v-bind:class=“{'open'：isOpen}”

我的答案是你想要的@DonnieBerry吗？对不起，是的，我会把它标记正确