vue 在 html标签上 做三元运算

众所周知,在js 中 a

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

例如:

<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

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

即:
在这里插入图片描述

你可能感兴趣的:(vue)