点击事件的三元

<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. linux 下项目的发布

    [wangq10@VM000001865 logs]$ [wangq10@VM000001865 ~]$ ls[wangq10@VM000001865 logs]$ apache-tomcat-7.0 ...

  2. leetcode16 最接近的三数之和

    做了几周的hard之后,这道题居然轻易就解出来了,稍微debug了一下就ac了,算是有了一丢丢提高把: 思路 这道题因为和三数之和很像,所以充分利用双指针的思想:先排序,然后再固定一个数i,i取值从[ ...

  3. 【Makefile】Makefile的自动化变量$@、$^ 、$<等

    所谓自动化变量,就是这种变量会把“模式”中所定义的一系列的文件自动地挨个取出,直至所有的符合模式的文件都取完了.这种自动化变量只应出现在规则的命令中. $@ 表示规则中的目标文件集.在模式规则中,如果 ...

  4. selenium操作cookie

    1,登录网页,使用webdriver的get_cookies获取cookie,并保存json文件 2,读取json文件,遍历添加网站使用的每一个cookies的name,value. 使用add_co ...

  5. Selenium 2自动化测试实战35(HTML测试报告)

    HTML测试报告 显然,一份漂亮的测试报告展示自动化测试成果只有一个简单的log文件是不够的.HTMLTestRunner是python标准库unittest单元测试框架的一个扩展,它生成易于使用的H ...

  6. npm publish 发布失败 无法连接 https://registry.npmjs.org

    自己写的npm包,之前每次更新都是正常发布,最近做个一个更新,想发布,然后npm publish 竟然失败, 错误提示如下: npm ERR! network request to https://r ...

  7. CetOS 服务不支持 chkconfig 的解决方法

    今天在添加Elasticsearch系统自动启动服务的时候,提示 “服务 elasticsearch 不支持 chkconfig ”,如下图: 后来查找了下原因,是脚本编写的不符合规范,缺少关键的前三 ...

  8. 文件上传and富文本页面

    文件上传功能: 1.首先在index.jsp的界面上初始化一个表单. <body> <form enctype="multipart/form-data" act ...

  9. linux常用命令---------------find

    1.find 基本模式 find path -option [ -print ] [ -exec -ok command ] {} \; 2.常用的参数 -name name, -iname name ...

  10. tp5 ThinkPHP5 自定义异常处理类

    在项目的开发过程中异常抛出尤为重要不仅能够做出友好提示帮助掩盖我们伟大的程序员们尴尬的瞬间,还能做到提示开发人员代码白编写的错误,下面进行自定义异常抛出类,纯属个人理解,希望大家指正 首先在框架中我们 ...