点击事件的三元

<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. AIX系统命令

    当/oracle达到一定使用量时需清除*.trc文件find . -name "*.trc"|xargs rm -rf 1.查看是否开启归档日志切换用户:su - oracle使用 ...

  2. 一百一十四:CMS系统之图形验证码生成

    安装Pillow库,用于生成图形验证码:pip install Pillow 字体文件来源 生成一个验证码图片 import randomimport stringfrom PIL import Im ...

  3. redis 超时失效key 的监听触发使用

    redis自2.8.0之后版本提供Keyspace Notifications功能,允许客户订阅Pub / Sub频道,以便以某种方式接收影响Redis数据集的事件. 可能收到的事件的例子如下: 所有 ...

  4. openstack compute service list Unable to establish connection to http://controller:8774/v2.1/os-services: ('Connection aborted.', BadStatusLine("''",))

    8774是nova的端口号,所以我就逐一查看nova的日志文件. tail -f /var/log/nova/nova-conductor.log 2019-06-13 08:24:53.559 44 ...

  5. Kettle 排序记录的使用(Sort rows)

    排序行的步骤根据您指定的字段和它们是否应该按升序或降序排序当行数超过指定的排序大小(默认为100万行)时候,kettle必须使用临时文件排序行.步骤名称:名称在整个转换中应该是唯一的排序目录:默认当前 ...

  6. 如何写resultful接口

    一.协议 API与客户端用户的通信协议,总是使用HTTPS协议,以确保交互数据的传输安全. 二.域名 应该尽量将API部署在专用域名之下: https://api.example.com 如果确定AP ...

  7. 关于MacBook Pro外接4K/60HZ显示器的问题

    我踩过的坑 MacBook Pro 外接 4K/60HZ显示器[显示器自带HDMI2.0支持4k] 拓展坞不支持4K/60HZ,最后导致只能支持 30HZ,鼠标移动明显延迟. 总结如下: DVI线类长 ...

  8. 硬盘相关合集,以及LVM操作实践

    1. 机器装有两块硬盘,重装系统只找到一块盘,如何解决? 正常装完系统后,运行: a. lsblk查看硬盘信息,这里可以发现还没有使用的另一块盘. b. fdisk或parted给硬盘分区,取决于硬盘 ...

  9. 【VS开发】VSTO 学习笔记(十)Office 2010 Ribbon开发

    微软的Office系列办公套件从Office 2007开始首次引入了Ribbon导航菜单模式,其将一系列相关的功能集成在一个个Ribbon中,便于集中管理.操作.这种Ribbon是高度可定制的,用户可 ...

  10. 如何在picture上显示透明Label