首页 > 编程知识 正文

怎么在电脑上做标签,vue三元运算更改样式

时间:2023-05-06 06:45:08 阅读:194610 作者:868

众所周知,在js 中 a<b?‘方法一’:‘方法二’ 这种 三元运算 是比较方便快捷,那么如何在html标签上直接使用呢?

在 标签包裹中,一半为内容,可以直接使用

例如:

<p class="price">{{price>100?'涨价了':'降价了'}}</p>

在 标签内,如 class、style、data- 等等 都需要简单处理

例如:

<template v-for="(item,index) in selcoursesList"> <Checkbox :label="item.id" :disabled="item.disabled" :style="`float:${(index+1)%2==0?'left':'right'}`" > <img :src="item.coverImg"> <p class="name">{{item.name}}</p> <p class="teacher">忧郁的招牌:{{item.lecturerName}}</p> </Checkbox></template>

解释:

在 class、style、data- 等 通过 变量来达到一定目的,需要在前面加一个 :,

如: :class、:style

变量与字符的组合可以用 `` 包裹,其中变量 用 ${} 包裹,

即:

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。