vue 在 html标签上 做三元运算
众所周知,在js 中 a<b?‘方法一’:‘方法二’ 这种 三元运算 是比较方便快捷,那么如何在html标签上直接使用呢?在 标签包裹中,一半为内容,可以直接使用例如:<p class="price">{{price>100?'涨价了':'降价了'}}</p>在 标签内,如 class、style、data- 等等 都需要简单处理例如:<template
·
众所周知,在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
变量与字符的组合可以用 `` 包裹,其中变量 用 ${} 包裹,
即:
更多推荐
已为社区贡献5条内容
所有评论(0)