vue动态绑定多个class以及带上三元运算或其他条件

目录
  • 动态绑定多个class带上三元运算或其他条件
    • 动态绑定属性
    • 例子
    • 实现
  • 一个标签中含有多个class(其中包含三元表达式)的写法
    • 1.数组形式
    • 2.字符串拼接

动态绑定多个class带上三元运算或其他条件

动态绑定属性

在v-for循环中，根据需求，在10条数据里，前3条添加不一样的样式。

例子

设置第一条数据的样式为one

<li v-for="(item,index) in items" :key="index">
    <span :class="index==0?'one':''">{{index+1}}</span>
</li>

设置样式并判断

<li v-for="(item,index) in items" :key="index">
    <span :class="[index==0?'one':'','select-active':items.istrue]">{{index+1}}</span>
</li>

实现

<li v-for="(item,index) in items" :key="index">
    <span :class="[index==0?'one':'',index==1?'two':'',index==2?'three':'']">{{index+1}}</span>
</li>

一个标签中含有多个class(其中包含三元表达式)的写法

1.数组形式

<div :class='["classify",current=="0" ? "active" : ""]'  @click='current=0'>课程</div>

注意：数组中的classify如果不加引号的话，代表的是data中的一项，并不是类名，将classify加上双引号，变成字符串就可以变成类名

2.字符串拼接

<div :class="'classify'+(current=='0'?' active':'')"  @click='current=0'>课程</div>

注意：active前要加一个空格（必须有），字符串拼接时，两个字符串之间要有空格

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 样式切换及三元判断样式关联操作

    假设有需求: 后台返回状态1:启用,0:禁用 1.若要使启用为绿色,禁用不添加其他样式 <el-table-column prop="statusName" align="center" label="状态"> <template slot-scope="scope"> <div :class="{active:scope.row.status==1}"> {{ scop

  • vue中巧用三元表达式解析

    vue中巧用三元表达式解析

    目录 如何巧用三元表达式 三元表达式的巧妙使用 :class=“ “的三元表达式写法 如何巧用三元表达式 一开始我并不喜欢阅读别人的代码,话说程序员最讨厌的事:写代码要写文档.写代码要写注释.别人的代码没有文档.别人的代码没有注释.后来发现阅读别人的代码虽然很枯燥,但是很锻炼逻辑思维,而且还能学到很多东西,比如我下面要说的这个: 三元表达式的巧妙使用 在某天(其实具体是哪天我也忘了),我在阅读别人的代码时发现一串三元表达式,感觉很6,像是打开新世界的大门一样,顿时感觉只有你想不到的,没有别人做不

  • vue基础语法之插值表达式详解

    vue基础语法之插值表达式详解

    目录 一.vscode插件介绍 二.插值表达式介绍 三.插值表达式示例1 四.插值表达式示例2 五.插值表达式注意点 六.插值表达式补充 总结 一.vscode插件介绍 在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击刷新,插件会帮我们自动进行刷新,是不是非常方便,提高了我们的开发效率,节省了我们每次修改代码都要点击一次刷新的操作. 安装步骤如下图所示:安装Live Se

  • vue动态绑定多个class以及带上三元运算或其他条件

    目录 动态绑定多个class带上三元运算或其他条件 动态绑定属性 例子 实现 一个标签中含有多个class(其中包含三元表达式)的写法 1.数组形式 2.字符串拼接 动态绑定多个class带上三元运算或其他条件 动态绑定属性 在v-for循环中,根据需求,在10条数据里,前3条添加不一样的样式. 例子 设置第一条数据的样式为one <li v-for="(item,index) in items" :key="index">     <span :

  • Vue axios 跨域请求无法带上cookie的解决

    在main.js设置 // 携带cookie axios.defaults.withCredentials = true 补充知识:VUE axios请求跨域时没有带上cookie或者每次cookie都改变 这两天用VUE写管理后端时,碰到一个奇葩问题: 我本地使用dev配置开发的时候 请求可以带上cookie信息  打包出来部署在服务器上 请求就没带上cookie信息. 然后自己慢慢排查,联合后端同事,排查这个cookie问题,前端也配置了 axios.defaults.withCredent

  • vue三元运算之多重条件判断方式(多个枚举值转译)

    目录 vue多重条件判断(多个枚举值转译) vue标签中使用三元运算符 vue多重条件判断(多个枚举值转译) 直接上代码: div class="msgLi">      <p>组织设置:</p>      <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.pa

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

  • vue动态绑定图标的完整步骤

    vue动态绑定图标的完整步骤

    0 图标和图片的不同 图标时字符,图片时二进制流.即图片加载会比图标慢,且加载图标最好不要用img标签,我们可以把图标当成组件用import的方法引入进来,然后当成标签引入. 1 安装svg 1.使用管理员身份运行cmd窗口,切换到项目目录下执行. npm add svg 2 从图标库下载图标 1.阿里图标库 https://www.iconfont.cn/ 2.下载svg 3.在compone目录下建立一个icons,在icons下建立一个svg目录,专门用来放图标. 3 查看插件的使用方法

  • vue动态绑定v-model属性名方式

    目录 vue动态绑定v-model属性名 1.目标 2.方案 vue双向绑定原理(v-model) 表单绑定 组件使用v-model vue动态绑定v-model属性名 1.目标 首先配置列,根据配置渲染表单,每个表单项绑定配置中的属性 2.方案 <template v-for="(item) in showQueryColumns" > <el-col :key="item.prop" :xs = "24" :sm = &qu

  • 切记ajax中要带上AntiForgeryToken防止CSRF攻击

    经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.AntiForgeryToken()会生成一对加密的字符串,分别存放在Cookies 和 input 中. 我们在ajax post中也带上AntiForgeryToken @model WebApplication1.Controllers.Person @{ ViewBag.Title = "In

  • Ajax跨域请求COOKIE无法带上的完美解决办法

    1.原生ajax请求方式: 1 var xhr = new XMLHttpRequest(); 2 xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); 3 xhr.withCredentials = true; //支持跨域发送cookies 4 xhr.send(); 2.jquery的ajax的post方法请求: $.ajax({ type: "POST", url: &qu

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • Vue 将后台传过来的带html字段的字符串转换为 HTML

    Vue 将后台传过来的带html字段的字符串转换为 HTML

    后台传过来 一个带标签的字符串  前端可以直接转换成html格式的,可是在vue中怎么办呢 在这个DEMO中,item.content所带的字符串将被转换为HTML代码. 注意:使用了v-html的标签中的内容将被item.content替代: <div class="item" v-for="item in socialArray"> <dl v-html="item.content"> {{item.content}}

随机推荐