class="{{a?".items_1_red":".items_1_white"}}"有没有写错

class="{{a?".items_1_red":".items_1_white" 这段代码是一个动态类名的写法，根据变量a的值来决定元素的类名是"items_1_red"还是"items_1_white"。根据代码来看，没有明显的语法错误。

但是需要注意的是，这段代码中使用了双引号嵌套双引号的写法，可能会导致语法错误。正确的写法应该是使用单引号或者转义字符来嵌套引号，例如：

class="{{a?'items_1_red':'items_1_white'}}"

或者

class="{{a?\"items_1_red\":\"items_1_white\"}}"

请根据具体的需求和语言规范来选择合适的写法。如果你能提供更多上下文信息或者具体的编程语言，我可以给出更准确的答案。

相关问题

<div style="margin: 0px 20px;padding: 10px 0px;"> <div class="container"> <div class="logo"> <span class="ng-binding"> <img id="minImg" src="${ctx}/resource/login/images/zcllogo/zhongchul_1.png" style="height:25px;margin: 0px"> </span> </div> <div class="title"> <div class="green">数据中心 </div> <div class="red">安全生产数据大屏幕 </div> <div class="white">统计分析</div> </div> <div class="icon"> <span class="ng-binding"> <img id="minImg2" src="${ctx}/resource/login/images/zcllogo/dpicon.png" style="height:25px;margin: 0px"> 已安全运行 160 天 </span> </div> </div> <div class="container1"> </div> <div class="container2"> </div> </div> 其中container已布局完成，为第一行的标题； container1为第二行区域，container2为第三行的区域；第一行区域和第二行区域上下间隔出来； 第二行的区域需均分为7个长方体的圆角框且白色边框高亮显示（展示风险点、安全检查、安全隐患、培训记录、危险作业、应急演练、设备设施的汇总数据）

根据您的描述，以下是一个示例代码，展示了您所描述的布局和样式：

<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .container1 {
        margin-top: 10px;
        background-color: #f2f2f2;
        padding: 10px;
    }

    .container2 {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

    .box {
        flex-basis: 14%;
        background-color: #ffffff;
        border: 1px solid #00a854;
        border-radius: 5px;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
        transition: all 0.3s ease-in-out;
    }

    .box:hover {
        background-color: #00a854;
        color: #ffffff;
    }
</style>

<div style="margin: 0px 20px; padding: 10px 0px;">
    <div class="container">
        <div class="logo">
            <span class="ng-binding">
                <img id="minImg" src="${ctx}/resource/login/images/zcllogo/zhongchul_1.png" style="height:25px;margin: 0px">
            </span>
        </div>
        <div class="title">
            <div class="green">数据中心</div>
            <div class="red">安全生产数据大屏幕</div>
            <div class="white">统计分析</div>
        </div>
        <div class="icon">
            <span class="ng-binding">
                <img id="minImg2" src="${ctx}/resource/login/images/zcllogo/dpicon.png" style="height:25px;margin: 0px">
                已安全运行  160  天
            </span>
        </div>
    </div>
    <div class="container1">
        <!-- 第二行区域内容 -->
    </div>
    <div class="container2">
        <div class="box">风险点</div>
        <div class="box">安全检查</div>
        <div class="box">安全隐患</div>
        <div class="box">培训记录</div>
        <div class="box">危险作业</div>
        <div class="box">应急演练</div>
        <div class="box">设备设施的汇总数据</div>
    </div>
</div>

在上述示例中，我们使用了一些 CSS 样式来实现所需的布局和效果。`.container` 类将第一行的内容进行了布局，`.container1` 类和 `.container2` 类分别用于第二行和第三行的区域。`.box` 类用于定义长方体的圆角框，并在鼠标悬停时进行高亮显示。

您可以根据实际需求调整样式和内容。希望这能帮助到您！

<div class="container"> <div class="logo"></div> <div class="title"> <div class="green">数据中心</div> <div class="red">安全生产数据大屏幕</div> <div class="white">统计分析</div> </div> <div class="icon"></div> </div> 怎么让logo 父级div的最左边展示， green、red、white 居中，icon 靠最右边显示

要实现 logo 在父级 div 最左边展示，green、red、white 居中，icon 靠最右边显示的布局，您可以使用 flex 布局和适当的样式。以下是一个示例代码：

<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        background-color: #f2f2f2;
    }

    .logo {
        width: 50px;
        height: 50px;
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }

    .green {
        font-size: 12px;
        color: green;
    }

    .red {
        font-size: 18px;
        color: red;
    }

    .white {
        font-size: 12px;
        color: white;
    }

    .icon {
        width: 20px;
        height: 20px;
    }
</style>

<div class="container">
    <div class="logo"></div>
    <div class="title">
        <div class="green">数据中心</div>
        <div class="red">安全生产数据大屏幕</div>
        <div class="white">统计分析</div>
    </div>
    <div class="icon"></div>
</div>

在上述示例中，我们使用了 flex 布局来实现子元素的位置和对齐。`.container` 类设置了 `display: flex;`，使其内部的子元素成为 flex 容器。`align-items: center;` 将子元素在垂直方向上居中对齐，`justify-content: space-between;` 将子元素在水平方向上均匀分布。

`.logo` 类设置了 logo 元素的宽度和高度。

`.title` 类设置了标题部分的样式。`display: flex;` 将标题内部的子元素变为 flex 容器，`align-items: center;` 和 `justify-content: center;` 将子元素在水平和垂直方向上居中对齐。`flex-grow: 1;` 让标题部分占据剩余的空间。

`.green`、`.red` 和 `.white` 类分别设置了不同颜色和字体大小的文本样式。

`.icon` 类设置了小图标的宽度和高度。

通过这些样式设置，logo 元素将展示在父级 div 的最左边，green、red、white 文本将居中显示，而 icon 元素将靠最右边显示。您可以根据需要调整样式和内容来实现您的实际需求。