样式绑定不适用于 HTML 图像元素 (Vue.js)

Question

在Vue中，我试图为HTML图像元素的CSS"top"属性使用样式绑定：

<img src="../assets/myimg.png" id="myimg" v-bind:style="[!ended ? 'top:20%' : 'top:80%']">

这是图片的CSS：

#myimg{
position: absolute;
width: 100px;
height: 10px;
left: 10%;
}

"end"只是该组件从其父级接收的一个道具。如果为false，则图像的"顶部"属性应为20%，否则应为80%。

不幸的是，无论"结束"是真是假，图像都会停留在同一位置。我该如何解决此问题？

Answer 1

以下是Vue.js:中样式绑定的完整文档

https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

在您的情况下，您可以使用对象语法：

<img src="../assets/myimg.png" id="myimg" v-bind:style="{ top: !ended ? '20%' : '80%'}">

希望这能有所帮助！

Answer 2

试着把它写在括号里，

<img src="../assets/myimg.png" id="myimg" v-bind:style="[!ended ? {'top':'20%'} : {'top':'80%'}]">

Answer 3

另外，您可以使用以下方法：

<img src="../assets/myimg.png" id="myimg" v-bind:style="'top:' + (!ended ? '20%' : '80%')">

或者，如果您想使用es6模板文字：

<img src="../assets/myimg.png" id="myimg" v-bind:style="`top: ${!ended ? '20%' : '80%'}`">

第三个替代方案是将动态样式添加到计算属性中，如下所示：

<img src="../assets/myimg.png" id="myimg" v-bind:style="dynamicStyle">

然后在脚本中添加以下代码：

computed: {
dynamicStyle() {
return {
top: !this.ended ? '20%' : '80%'
}
}
}