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%;
  }

“结束”只是该组件从其父级接收的道具。如果为假，则图像的“ top”属性应为20％，否则应为80％。

不幸的是，不管“ end”是对还是对，图像都停留在相同的位置。我该如何解决？

Answer 1

这是Vue.js中样式绑定的完整文档：

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

根据您的情况，可以使用对象语法：

if let urlStringArr : NSArray = tempDic["get_image"] as? NSArray
        {
            if urlStringArr.count != 0
            {

                var imagesListArray = [UIImage]()
                if urlStringArr.count > 1
                {
                    for i in 0..<urlStringArr.count
                    {
                        let url = URL(string:urlStringArr[i] as! String)
                        if let data = try? Data(contentsOf: url!)
                        {
                            let image: UIImage = UIImage(data: data)!
                            imagesListArray.append(image)
                        }
                    }

                     cell.imagePet.animationImages = imagesListArray
                     cell.imagePet.animationDuration = 5.0
                     cell.imagePet.startAnimating()

                }
                else
                {
                    if let getUrlString : String = urlStringArr[0] as? String
                    {
                        if getUrlString != ""
                        {
                            cell.imagePet.sd_setImage(with: URL(string:getUrlString), placeholderImage:nil)
                        }
                    }
                }


            }
        }

希望这会有所帮助！

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%'}`">

第三种替代方法是将动态样式添加到computed property中，如下所示：

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

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

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

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

3 个答案: