zoukankan      html  css  js  c++  java
  • 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前要加一个空格(必须有),字符串拼接时,两个字符串之间要有空格

  • 相关阅读:
    webpack
    localStorage使用总结
    html5 的localstorage
    js 的登录验证
    webpack vue2.0项目脚手架生成的webpack文件
    vue2.0 keep-alive最佳实践
    npm 的指令介绍
    vue2.0 子组件和父组件之间的传值
    electron的通信
    electron 的窗口设置最大化 最小化
  • 原文地址:https://www.cnblogs.com/ll15888/p/11506769.html
Copyright © 2011-2022 走看看