zoukankan      html  css  js  c++  java
  • Vue中涉及到的三目运算与v-if结合

    一.问题1

    1.需求:最近在用Vue写后台,其中有个需求被广泛使用:点击签收,立即变成     节点办理|办结

    2.解决办法:

    思路;在   节点办理|办结  两个button按钮上绑定v-if的三目运算,当点击签收,签收状态改变,刷新页面,v-if的条件执行,显示  节点办理|办结

    使用的是elementUI的table组件,根据组件的api,点击签收按钮,传递当前这行的数据,能够得到签收状态的值,在   节点办理|办结  使用v-if进行三木运算的判断

    具体代码:

     3.想法:

    我觉得v-if和三目运算在这种变量只有两个状态的条件下切换用来特别方便,尤其是做后台,频繁用到这个功能,v-show也可以使用,但是在这个地方使用起来太麻烦,而且v-show只是隐藏css样式,不重新加载,所以还涉及变量清空的问题

    二.问题2

    1.需求:主要是使用v-if在elementUI的form表单中关联某些表单项

    分割线

     

     选参数配置,显示表单项  父级   ,选目录时隐藏父级

    2.想法:radio这种只有两个选项的时候,使用v-if,而且不涉及在Vue中的data中处理,我猜想的是v-model中的双向绑定值,还跟问题1不一样,毕竟问题1要去走个接口,去改变状态,而在form表单中,只需要选参数配置就显示父级,非常方便

    三.问题3

    1.需求:由按钮来控制表单的状态,即是否可编辑,不可编辑就是禁用状态,初始状态是被禁用转态

    初始

    点击编辑按钮后,切换成可编辑状态

     2.思路:同样使用三目运算,在网上看了别人的想法,再改了下,可以这样做

    elementUI中的disabled绑定一个变量,且变量赋值,利用三木运算判断,:disabled="(dialogType)=='edit'?true:false"   需要注意的是变量加括号,值如果是字符串加引号

    这样赋值之后,在编辑事件中,只需要改变dialogType的值,随便赋值即可,只要不跟初始化的值一样就可以,还需要注意的是在data中也要赋初始值,

     参考链接:https://blog.csdn.net/hongc93/article/details/105587375

    这是最近做后台遇到三目运算跟v-if的问题,做总结,以后遇到了会持续更新

     9.10更新

     四.问题4

    三目运算加两个条件

     转载于:https://blog.csdn.net/u014131617/article/details/86641206

  • 相关阅读:
    c# 执行windows模拟登录
    c#文件压缩解压
    c#文件上传下载功能实现
    .NET core3.1 使用Jwt保护api
    我所理解的闭包
    数组遍历for forEach for..in for..of
    变量提升
    微信小程序做radio,可以拖动进度条
    css:flex
    css常用布局
  • 原文地址:https://www.cnblogs.com/lanatth/p/13503254.html
Copyright © 2011-2022 走看看