美文网首页
vue中实现多种状态的数据判断

vue中实现多种状态的数据判断

作者: 嗯哼曼 | 来源:发表于2019-05-07 10:19 被阅读0次

    如果就两种情况,那么使用三元运算符condition ? expr1 : expr2; 很容易实现。
    一般三元运算符就够了~
    但是此时有个需求:state有3个状态:0→新增 1→修改 2→完成
    我犹豫了一下,蠢蠢の去百度了一下四元运算符... 还试了if else 哈哈 😂

    其实非常简单哦~
    两种实现方法如下:
    👇👇👇
    1️⃣这个方法简单易懂~推荐哦✨
    <td>{{['新增', '修改', '已完成'][item.status]}}</td>
    status = 0 ,内容显示新增
    status = 1 ,内容显示修改
    status = 2 ,内容显示已完成

    2️⃣但是当我们样式也需要根据状态发生变化呢?
    以上方法好像有点儿行不通的样子..
    我按照上面方法写了一下一直报错,错误的代码就不放上来了吧~
    那这时候可以选择嵌套三元运算哦~
    <tr :class="[item.status==0?'a':[item.status==1?'b':'c']]">
    status = 0 ,使用a样式
    status = 1 ,使用b样式
    status = 2 ,使用c样式

    👆👆👆

    相关文章

      网友评论

          本文标题:vue中实现多种状态的数据判断

          本文链接:https://www.haomeiwen.com/subject/fggsoqtx.html