技術標籤：vue

眾所周知，在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

變數與字元的組合可以用 `` 包裹，其中變數 用 ${} 包裹，

即：