vue中的常用三元
点击事件的三元
<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中的常用三元的更多相关文章
- vue中 aixos 常用配置 aixos拦截器 interceptors的使用
axios的配置 公共路径配置 拦截器的使用 //这个文件是根组件 new Vue,所有所需的模块和对象都要在new Vue之前配置好 ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- 前端Vue中常用rules校验规则
前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...
- VUE中常用的十大过滤器
在vue的学习过程中,我发现过滤器是一个很好用的工具,过滤器(Filters)来渲染数据是一种很有趣的方式.过滤器不能替代Vue中的methods.computed或者watch,不改变真正的data ...
- Vue中常用的几种传值方式
Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- 动手实现一个vue中的模态对话框组件
写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- 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 ...
随机推荐
- leetcode16 最接近的三数之和
做了几周的hard之后,这道题居然轻易就解出来了,稍微debug了一下就ac了,算是有了一丢丢提高把: 思路 这道题因为和三数之和很像,所以充分利用双指针的思想:先排序,然后再固定一个数i,i取值从[ ...
- HttpClient提交数据
用代码模拟浏览器的行为 * 轻量级的开源的框架 * Android在6.0 23 以后移除了httpclient ,所以开发中用的少了 * 编写步骤: 1. 打开浏览器 2. 输入网址 3. 敲回车 ...
- css3属性clip
clip 属性定义了元素的哪一部分是可见的.clip 属性只适用于 position:absolute 的元素. rect(<top>, <right>, <bottom ...
- Django运行项目时候出现DisallowedHost at / Invalid HTTP_HOST header:
web端错误现象: DisallowedHost at / Invalid HTTP_HOST header: 'ip:8000'. You may need to add u'ip' to ALLO ...
- 运行python程序不显示cmd方法
运行python程序不显示cmd方法 Pythonw xxx.py 将*.py改成*.pyw,然后执行*.pyw Python.exe和pythonw.exe不同: 执行时没有控制台窗口 所有向原有的 ...
- Kafka管理与监控——彻底删除topic
一.配置 server.properties 设置 delete.topic.enable=true 如果没有设置 delete.topic.enable=true,则调用kafka 的delete命 ...
- Java数组(3):创建测试数据
有时我们需要使用数组批量创建测试数据,接下来通过以下4点来举例. (1) 使用Arrays.fill()填充数据 (2) 使用Random类中JDK1.8提供的新方法用来生成随机数 (3) 一个随机数 ...
- Mybatis 属性配置
properties 定义配置,配置的属性可以在整个配置文件中的其他位置进行引用 <properties resource="db.properties"></ ...
- docker笔记(3)—— 容器
操作环境:mac OS 10.14.6 docker版本:10.03.1 终端:iterm2 3.3 时间:2019年8月 容器相当于镜像的实例,镜像相当于只读模板,容器在镜像所有层级之上创建了一个可 ...
- PHP学习(2)——操作符与迭代整理
目录: 10.操作符整理 11.表单计算代码 12.优先级与结合性 13.可变函数 14.条件判断 15.循环迭代 16.跳出控制 17.可替换的控制结构 10.操作符 10.1 算术操作符 算术操作 ...