精华内容
下载资源
问答
  • 3.父组件修改传递给子组件的值,子组件能动态监听到改变。 比如父组件点击重置,开关组件的状态恢复为关闭状态: 方法1: 1、因为存在子组件要更改父组件传递过来的数据,但是直接操作props里定义的数据vue会报错,...
  • 在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态改变然后子组件也能监听到这个数据的改变来更新子组件的状态。 场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的...

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。

    场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件。

    比如想实现一个switch开关按钮的公用组件:

     

     

    1.父组件可以向按钮组件传递默认值。

    2.子组件的操作可以改变父组件的数据。

    3.父组件修改传递给子组件的值,子组件能动态监听到改变。

    比如父组件点击重置,开关组件的状态恢复为关闭状态:

    方法1:

    1、因为存在子组件要更改父组件传递过来的数据,但是直接操作props里定义的数据vue会报错,所以需要在data里重新定义属性名并将props里的数据接收。

    2、首先想到的肯定是在computed计算属性里监听数据的变化,那就直接在computed里监听父组件传递过来的props数据的变化,如果有变动就进行操作,如:

    export default {
      name: 'SwitchButton',
      props: {
        status: {
          type: Boolean,
          default () {
            return false
          }
        }
      },
      data () {
        return {
          switchStatusData: this.status // 重新定义数据
        }
      },
      computed: {
        switchStatus: function () {
          return this.status // 直接监听props里的status状态
        }
      }
      }
    }

    这样就可以在使用switchStatus的地方动态的监听到父组件status的变化。似乎只针对简单的数据类型有效。

    方法2:

    使用watch和computed组合实现:如

    export default {
      name: 'SwitchButton',
      props: {
        status: {
          type: Boolean,
          default () {
            return false
          }
        }
      },
      data () {
        return {
          switchStatusData: this.status
        }
      },
      computed: {
        switchStatus: function () {
          return this.switchStatusData  // 监听switchStatusData 的变化
        }
      },
      watch: {
        status (newV, oldV) { // watch监听props里status的变化,然后执行操作
          console.log(newV, oldV)
          this.switchStatusData = newV
        }
      },
      methods: {
        switchHandleClick () {
          this.switchStatusData = !this.switchStatusData
          this.$emit('switchHandleClick', this.switchStatusData)
        }
      }
    }

     

    下面是实现该组件的代码:

    <template>
      <span class="switch-bar" :class="{'active': switchStatus}" @click="switchHandleClick"><span class="switch-btn"></span></span>
    </template>
    <script>
    export default {
      name: 'SwitchButton',
      props: {
        status: {
          type: Boolean,
          default () {
            return false
          }
        }
      },
      computed: {
        switchStatus: function () {
          return this.status
        }
      },
      // watch: {
      //   status (newV, oldV) {
      //     console.log(newV, oldV)
      //     this.switchStatusData = newV
      //   }
      // },
      methods: {
        switchHandleClick () {
          const switchStatusData = !this.switchStatus
          this.$emit('switchHandleClick', switchStatusData)
        }
      }
    }
    </script>
    <style lang="stylus" scoped>
      @import "~styles/varibles.styl"
      .area-wrapper
        line-height: .8rem;
        padding: 0 .4rem;
        .switch
          float: right;
          font-size: 0;
        .switch-bar
          position: relative;
          display: inline-block;
          width: .8rem;
          height: .4rem;
          border-radius: .4rem;
          background: #ddd;
          border: 2px solid #ddd;
          vertical-align: middle;
          transition: background .3s, border .3s;
          &.active
            background: $bgColor;
            border: 2px solid $bgColor;
            .switch-btn
              left: .4rem;
              background: #fff;
        .switch-btn
          position: absolute;
          left: 0px;
          display: inline-block;
          width: .4rem;
          height: .4rem;
          border-radius: .2rem;
          background: #fff;
          transition: background .3s, left .3s;
    </style>

     

    转载于:https://www.cnblogs.com/amor17/p/10157313.html

    展开全文
  • 在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。场景:子组件通过props...3.父组件修改传递给子组件的值,子组件能动态监听...

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。

    场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件。

    比如想实现一个switch开关按钮的公用组件:

    1.父组件可以向按钮组件传递默认值。

    2.子组件的操作可以改变父组件的数据。

    3.父组件修改传递给子组件的值,子组件能动态监听到改变。

    比如父组件点击重置,开关组件的状态恢复为关闭状态:

    方法1:

    1、因为存在子组件要更改父组件传递过来的数据,但是直接操作props里定义的数据vue会报错,所以需要在data里重新定义属性名并将props里的数据接收。

    2、首先想到的肯定是在computed计算属性里监听数据的变化,那就直接在computed里监听父组件传递过来的props数据的变化,如果有变动就进行操作,如:

    export default{

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    data () {return{

    switchStatusData:this.status //重新定义数据

    }

    },

    computed: {

    switchStatus:function() {return this.status //直接监听props里的status状态

    }

    }

    }

    }

    这样就可以在使用switchStatus的地方动态的监听到父组件status的变化。似乎只针对简单的数据类型有效。

    方法2:

    使用watch和computed组合实现:如

    export default{

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    data () {return{

    switchStatusData:this.status

    }

    },

    computed: {

    switchStatus:function() {return this.switchStatusData //监听switchStatusData 的变化

    }

    },

    watch: {

    status (newV, oldV) {//watch监听props里status的变化,然后执行操作

    console.log(newV, oldV)this.switchStatusData =newV

    }

    },

    methods: {

    switchHandleClick () {this.switchStatusData = !this.switchStatusDatathis.$emit('switchHandleClick', this.switchStatusData)

    }

    }

    }

    下面是实现该组件的代码:

    name:'SwitchButton',

    props: {

    status: {

    type: Boolean,default() {return false}

    }

    },

    computed: {

    switchStatus:function() {return this.status

    }

    },//watch: {

    //status (newV, oldV) {

    //console.log(newV, oldV)

    //this.switchStatusData = newV

    //}

    //},

    methods: {

    switchHandleClick () {constswitchStatusData = !this.switchStatusthis.$emit('switchHandleClick', switchStatusData)

    }

    }

    }

    line-height: .8rem;

    padding:0.4rem;

    .switch

    float: right;

    font-size: 0;

    .switch-bar

    position: relative;

    display: inline-block;

    width: .8rem;

    height: .4rem;

    border-radius: .4rem;

    background: #ddd;

    border: 2px solid #ddd;

    vertical-align: middle;

    transition: background .3s, border .3s;&.active

    background: $bgColor;

    border: 2px solid $bgColor;

    .switch-btn

    left: .4rem;

    background: #fff;

    .switch-btn

    position: absolute;

    left: 0px;

    display: inline-block;

    width: .4rem;

    height: .4rem;

    border-radius: .2rem;

    background: #fff;

    transition: background .3s, left .3s;

    展开全文
  • 问题 由于mysql数据库没有Boolean类型,他将Boolean作为tinyint(1)... true:false使用后switch能显示正确状态,但不能拖动. 解决方案 查阅element-ui官方文档,发现有两个属性可以解决: 参数 说明 类型 可选 默认值

    问题

    由于mysql数据库没有Boolean类型,他将Boolean作为tinyint(1)的别名,因此使用Boolean类型作为字段时也可以建表.但实际上保存的是将true转换为1,false转换为0保存

    取出的数据返回到前端显示,但是v-model绑定只能是个变量,不能使用三元表达式scope.row.isAdmin ? true:false使用后switch能显示正确状态,但不能拖动.

    解决方案

    查阅element-ui官方文档,发现有两个属性可以解决:

    参数 说明 类型 可选值 默认值
    active-value switch 打开时的值 boolean / string / number true
    inactive-value switch 关闭时的值 boolean / string / number false

    随将active-value改为1,inactive-value改为0解决问题

    <el-switch 
                  v-model="scope.row.isAdmin"
                  :active-value="1" 
                  :inactive-value="0"
                  @change="userIsAdminChanged(scope.row)">
    </el-switch>
    
    展开全文
  • ETL-kettle-Switch/Case控件

    千次阅读 2019-04-04 14:25:31
    应用的场景:条件判断时使用 类似于java中的Switch/Case... 大体的意思是从输入方获取数据,到switch/case组件的时候,字段为flag,类型为String, 如果为'-9999' 则执行ElasticSearch步骤和字段选择步骤。 ...

    应用的场景:条件判断时使用

      类似于java中的Switch/Case,用于进行条件判断。

    例子:

    如图:

     

    输入内容如图:

    switch/case内容如图:

         大体的意思是从输入方获取数据,到switch/case组件的时候,字段为flag,类型为String,

    如果值为'-9999' 则执行ElasticSearch步骤和字段选择步骤。

     

     

    展开全文
  • 在选项卡中重写invalidateState方法通过this.currentState获取状态根据不同的状态可以赋不同的值 可以重新getCurrentState方法根据不同的条件返回对应的皮肤状态 public getCurrentState():string { let ...
  • 定义一个开关组件,挂载到jquery后, $('#el').switch()就可以将#el变成一个开关组件,和$('#el').val()可以获取值( js也能取),放进form也能直接提交,专门解决老旧jquery项目维护难问题。 支持环境 边缘 火狐...
  • 微服务网关鉴权 —— 适配Gateway、Soul、Zuul等常见网关组件的请求拦截认证 单点登录 —— 一处登录,处处通行 模拟他人账号 —— 实时操作任意用户状态数据 临时身份切换 —— 将会话身份临时切换为其它账号 ...
  • 表单中用户名和密码两组件的数据将通过HTTP请求传给服务器的switch.jsp,服务器将这些信息封装在request对象中传给switch.jsp,所以switch.jsp可通过request.getParameter(String paraName)来获取这两个。...
  • android:onclick

    2021-04-20 10:57:11
    @Override public void onClick(View v) { int ItemId = v.getId();//获取组件的id switch (ItemId) { case R.id.big_pic: break; } }
  • 在实现中,assertion就是在程序中的一条语句,它对一个boolean表达式进行检查,一个正确程序必须保证这个boolean表达式的值为true;如果该值为false,说明程序已经处于不正确的状态下,系统将给出警告或退出。...
  • getAppSignatureSHA1 : 获取应用签名的的 SHA1 isAppForeground : 判断 App 是否处于前台 getForegroundApp : 获取前台应用包名 getAppInfo : 获取 App 信息 getAppsInfo : 获取所有已安装 App 信息 cleanAppData...
  • 实例56 用HTML表单设置JavaBean属性 实例57 计数器JavaBean 实例58 查询数据库JavaBean 实例59 购物车JavaBean及其应用 实例60 数据库记录分页操作JavaBean 第9章 Servlet技术 实例61 JSP与Servlet程序...
  • HybridApp 一种可以下载Native App,其用户界面全部或者部分元素在嵌入式浏览器组件(WebView之类)里面运行 优雅降级 一开始就构建站点完整功能,然后针对浏览器测试和修复。认为应该针对那些最高级、最...
  • - action 返回 plain object 中包含属性为 type 常量 - 表明这个对象里携带其他数据应该被如何「再处理」 - 或者不带其他数据,仅仅启示已有数据需要如何调整,或者需要主动获取哪些数据 <p>...
  • 一本很好书《21天学通C#》

    热门讨论 2010-07-25 18:28:53
    9.5.1 帮助文档组件(HelpProvider):关联提供上下文帮助 178 9.5.2 定时器组件(Timer):定期引发某个事件 179 9.5.3 其他组件 179 9.6 对话框 180 9.6.1 保存文件对话框(SaveFileDialog):保存文件到...
  • 5.1.4 数组元素的值内有乾坤 105 5.1.5 创建数组的简洁语法 106 5.2 数组的“名”与“实” 107 5.2.1 “名”与“实”分离的数组 107 5.2.2 一“实”多“名”的数组 109 5.2.3 一“实”多“名”带来的困惑 111 ...
  • 获取任意类型函数各种特征,比如函数所有参数Params_T,返回值类型Return_T,对象类型Object_T(如果是成员函数),第N个参数类型GetFunctionParam,N>, 这些类型都是包含修饰符(const/voliate/ref)完整...
  • C#全能速查宝典

    热门讨论 2014-04-26 16:16:27
    2.1.5 Computer类——提供操作计算机组件的属性 129 2.1.6 ComputerInfo类——获取计算机信息 130 2.1.7 Control类——定义控件基类 131 2.1.8 Environment类——提供当前环境和平台的信息 134 2.1.9 Form窗体——...
  • 5.1.4 数组元素的值内有乾坤 105 5.1.5 创建数组的简洁语法 106 5.2 数组的“名”与“实” 107 5.2.1 “名”与“实”分离的数组 107 5.2.2 一“实”多“名”的数组 109 5.2.3 一“实”多“名”带来的困惑 111 ...
  • 5.1.4 数组元素的值内有乾坤 105 5.1.5 创建数组的简洁语法 106 5.2 数组的“名”与“实” 107 5.2.1 “名”与“实”分离的数组 107 5.2.2 一“实”多“名”的数组 109 5.2.3 一“实”多“名”带来的困惑 111 ...
  • //获取下一个矩形位置,返回整个下一个矩形 public abstract Rectangle getNextRect(); } ``` PlayerTanks类: ``` import java.awt.*; import java.awt.event.*; /** * 玩家坦克类,继承坦克...
  • Tcl_TK编程权威指南pdf

    热门讨论 2011-03-25 09:30:55
    画布组件的scrollincrement 选择 bell命令 第49章 tcl 7.5/tk 4.1 跨平台脚本 clock命令 load命令 package命令 多个foreach循环变量 事件循环从tk转移到了tcl 网络套接字 多解释器与safe-tcl grid布局...
  • getAppSignatureSHA256 : 获取应用签名的的 SHA256 getAppSignatureMD5 : 获取应用签名的的 MD5 getAppInfo : 获取 App 信息 getAppsInfo : 获取所有已安装 App 信息 关于数组各种排序算法 -> ...
  • 12.1 对话框组件的使用 实例290 获得弹出对话框的相关返回值 实例291 使用OpenFileDialog组件打开文件 实例292 设置OpenFileDialog组件中只能选择图片文件 实例293 使用OpenFileDialog组件打开多个文件 实例294...
  • 12.1 对话框组件的使用 实例290 获得弹出对话框的相关返回值 实例291 使用OpenFileDialog组件打开文件 实例292 设置OpenFileDialog组件中只能选择图片文件 实例293 使用OpenFileDialog组件打开多个文件 实例294...
  • 12.1 对话框组件的使用 实例290 获得弹出对话框的相关返回值 实例291 使用OpenFileDialog组件打开文件 实例292 设置OpenFileDialog组件中只能选择图片文件 实例293 使用OpenFileDialog组件打开多个文件 实例294...
  • 实例127 通过泛型查找不同数组中的值 158 实例128 通过继承泛型类实现输出学生信息 159 实例129 通过泛型实现子窗体的不同操作 160 实例130 使用泛型去掉数组中的重复数字 161 第6章 数据结构与算法 163 6.1 数据...
  •  实例127 通过泛型查找不同数组中的值 158  实例128 通过继承泛型类实现输出学生信息 159  实例129 通过泛型实现子窗体的不同操作 160 实例130 使用泛型去掉数组中的重复数字 161 第6章 数据结构与算法 ...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 131
精华内容 52
关键字:

获取switch组件的值