Question

我有这个div标签，该标签使用三元运算来确定应使用一种样式还是应使用另一种样式。

<div 
     class="@(Model.HeroBannerImageSmall ? "--imageSmall" : "--image")"
     style="@(Model.isSelected ? "background-position-x: "@Model.CropPositionX"% background-position-y: "@Model.CropPositionY"%; " : "background-position: @Model.UniformCropPosition%; ")
                 background-image: url(@Model.ContentUrl)">

</div>

遵循样式

               var imageClass = Model.HeroBannerImageSmall ? "hero__background hero__background--imageSmall" : "hero__background hero__background--image";
                var imageStyles = Model.isSelected ? "background-position-x: Model.CropPositionX%; background-image: url(Model.ContentUrl);" : "background -position: Model.CropPosition%; background-image: url(Model.ContentUrl);";

但这不会添加模型值，而只是将其写为字符串。如何插入值？

Answer 1

尝试在三元数内使用单引号

<div
   class='@(Model.HeroBannerImageSmall ? "--imageSmall" : "--image")'
   style='@(Model.isSelected ? "background-position-x:@Model.CropPositionX" % "background-position-y:@Model.CropPositionY"&; : "background-position:@Model.UniformCropPosition"&;')
   background-image: url(@Model.ContentUrl)'>
</div>

Answer 2

您必须混合使用单引号和双引号来使它起作用！例如：

class='@(Model.HeroBannerImageSmall ? "--imageSmall" : "--image")'

如果将其拉到div之前的代码分支中，可能会更易于阅读。即：

@{
    var imageClass = Model.HeroBannerImageSmall ? "--imageSmall" : "--image";

    var imgageStyle = Model.isSelected ? 
              "background-position-x: " + Model.CropPositionX + "% background-position-y: " + Model.CropPositionY + "%;" : 
              "background-position: " + Model.UniformCropPosition + "%; ";
     imgageStyle += "background-image: url(" + Model.ContentUrl + ")";

}



class='@imageClass' style='@imageStyle'

剃刀中的三元操作不正确

2 个答案: