vue 在 html标签上做三元运算

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

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

即：

vue 在 html标签上做三元运算相关推荐

html自定义属性冒号,vue中标签上的属性加冒号与不加冒号的区别
今天vue的项目中,因为很多结构一样的条目,所以想到了使用循环.但是问题来了,每个条目的图标不一样,这就需要在循环中依次添加不同的字体图标的类名.直接使用class来操作,结果没有报错,但是图标也没有 ...
在图片上做标签，图片可放大缩小
最近有个功能需要标记出没张图里脸部,并且点击大图后,图片可以缩放,标记也会跟着移动.有点类似地图tag 眼见为实,先上一张效果图: 由于最近项目已经完成差不多,在这段时间里把觉得有质量的功能拿出来和小 ...
巧妙利用标签TAG做长尾关键词上首页
凡事,做了再说.磨炼相对于成功占有比例很大一部分,打嘴炮的都是"坐井说天". 利用标签做长尾关键词上首页不知道全网有没有人重点写过这块内容,今天我来分享一下我个人的经验吧. 先介 ...
vue项目部署到服务器后浏览器标签上的小图标消失不见
背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...
vue的自定义标签tag是什么意思啊_好好的衣服为什么洗一次就废，服装标签上的图标究竟是什么意思？...
(图片来源:CNET) 常常有人抱怨衣服没洗几次,就变形掉色.你有没有想过,可能是你清洗方法错了! 衣服上标签不仅仅是成分介绍,它还是衣服的说明书,上面详细地告诉了你该如何保养洗护.而忽略这些图标,则 ...
java中数字作为布尔值_day50 java Script 数字和字符串布尔值和数组运算符条件判断和三元运算...
上节回顾: day501.前情回顾 CSS属性: float浮动的规则1. 浮动规则: 浮动只控制自己如果前面的标签也是浮动的,就挨着放如果前面的标签不浮动,则下方摆放如果把块级标签设置成浮动, ...
深浅拷贝、函数、内置函数、文件处理、三元运算、递归
深浅拷贝 import copy copy.copy() #浅拷贝 copy.deepcopy() #深拷贝 num = 110 copynum = num #赋值一.数字和字符串对于数字和 ...
vue 文件导入服务器,Vue 如何import服务器上的js配置文件
背景项目中有一个本地配置文件: // src/image-position.js export default { label: '首页', value: 'home', data: [ { lab ...
01 Python学习--第一周--开课介绍、数据类型、数据运算、表达式、循环、三元运算、对象基本概念...
模块一主要内容开课介绍 python发展介绍第一个python程序变量字符编码与二进制字符编码的区别与介绍用户交互程序 if else流程判断 while 循环 while 循环优化版本 ...

vue 在 html标签上做三元运算

vue 在 html标签上做三元运算相关推荐

最新文章

热门文章

vue 在 html标签上 做三元运算

vue 在 html标签上 做三元运算相关推荐

最新文章

热门文章

vue 在 html标签上做三元运算

vue 在 html标签上做三元运算相关推荐