点击事件的三元

<el-button type="primary" @click="edit == 'mod' ? sureModify() : submit()" style='margin-right:30px;'>提 交</el-button>

购物车按钮的三元

<div  bindtap="pay">{{edit ? '删除' : '去结算'}}</div>

绑定内联样式的三元

<div :style="{disabled:!amendPhoneIsShow?'':'disabled'}"></div>
<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>

绑定class样式

<i class="iconfont "  :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>
<div :class='["classify",current=="0" ? "active" : ""]'  @click='current=0'>点我改变</div>

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

还可以通过字符串拼接,在第二个class的前面加个空格

<div :class="'classify'+(current=='0'?' active':'')"  @click='current=0'>点我改变</div>

注意:active前要加一个空格(必须有),字符串拼接时,两个字符串之间要有空格

vue中的常用三元的更多相关文章

  1. vue中 aixos 常用配置 aixos拦截器 interceptors的使用

                                axios的配置   公共路径配置    拦截器的使用 //这个文件是根组件 new Vue,所有所需的模块和对象都要在new Vue之前配置好 ...

  2. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  3. 前端Vue中常用rules校验规则

    前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...

  4. VUE中常用的十大过滤器

    在vue的学习过程中,我发现过滤器是一个很好用的工具,过滤器(Filters)来渲染数据是一种很有趣的方式.过滤器不能替代Vue中的methods.computed或者watch,不改变真正的data ...

  5. Vue中常用的几种传值方式

    Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...

  6. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  7. 动手实现一个vue中的模态对话框组件

    写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...

  8. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  9. JavaScript 中的常用12种循环遍历(数组或对象)的方法

    1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 ...

随机推荐

  1. vscode在软件内部查看html渲染效果的插件

    使用方法: Usage press 'F1' and type "Show Live Server Preview" F1,然后输入Show Live Server Preview ...

  2. Handler处理消息

    UI主线程通过Looper循环查询消息队列UI_MQ,当发现有消息存在时会将消息从消息队列中取出.首先分析消息,通过消息的参数判断该消息对应的Handler,然后将消息分发到指定的Handler进行处 ...

  3. [Kerberos] Kerberos教程(二)

    4 Kerberos操作 最后,在获得前面段落中描述的概念后,可以讨论Kerberos如何运作.我们将通过列出和描述在身份验证期间在客户端和KDC之间以及客户端和应用程序服务器之间的每个数据包来执行此 ...

  4. bash-2 httpd服务的源码编译安装脚本

    httpd服务的源码编译安装脚本 #!/bin/bash # #******************************************************************** ...

  5. Dell 12V/18A电源适配器接口改造

    手头有几个航模用的充电器,原来一直用实验室电源,不方便移动,为了便携省地方,就想配个合适的电源.在网上找了下,航模专用的适配器价格太高,国产的杂牌适配器功率虚标严重并且可靠性是个问题,工业用的电源基本 ...

  6. 前端面试经典题之apply与call的比较

    在讲apply和call之前,我们需要先清楚在js中,this指向的是什么. 大家可以参考一下阮一峰老师写的关于JavaScript中this的原理讲解文章:http://www.ruanyifeng ...

  7. 通过火狐谋智查询API

    谋智中文版网址 https://developer.mozilla.org 示例 site: developer.mozilla.org window 通过百度高级用法查API site: 网址 搜索 ...

  8. u盘启动盘安装centos7.5操作系统

    1.下载CentOS 7.5的安装镜像:CentOS-7-x86_64-DVD-1804.iso 2.下载UltraISO:https://cn.ultraiso.net/xiazai.html 3. ...

  9. 查询统计SQL分组求和使用小技巧

    我们在做查询统计时,肯定会遇到将查询结果再次分组求和这种需求,但是往往查询的sql本身就比较复杂,再使用分组函数不太可能,那么这时候我们就想到了用临时表的办法,通过联合临时表我们就可以获得想要的分组求 ...

  10. 什么是数据管理DMS

    数据管理(Data Management)支持MySQL.SQL Server.PostgreSQL.PPAS.Petadata等关系型数据库,DRDS等OLTP数据库,ADS.DLA等OLAP数据库 ...