vue 实现特定条件下绑定事件

 更新时间:2019年11月09日 10:26:13   作者:灰姑娘的冰眸  
今天小编就为大家分享一篇vue 实现特定条件下绑定事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

今天写了个小功能,看起来挺简单,写的过程中发现了些坑。

1.div没有disabled的属性,所以得写成button

2.disabled在data时,默认是true,使得初始化时,默认置灰按钮,无法点击

<div class='form-item'>
  <div class="checkWrap clearfix" @click='checkMark()'>
    <div class="checkBox" v-show="checkShow"></div>
  </div>
  <div>我已阅读并接受<a href="http://www.baidu.com" rel="external nofollow" @click="conserve()">《xxx服务协议》</a>及隐私保护条款</div>
</div>
<button class='btn' ref='btn_submit' :disabled="isDisable" @click="check()">
  提交
</button>
export default {
  data() {
    return {
       checkShow: false,
      isDisable: true,
    }
  },

methods: {
  
/**
 * 协议勾选
 */
checkMark() {
  this.checkShow = !this.checkShow;
  if (this.checkShow === true) { 
    this.isDisable = false; //打勾时,可以点击按钮
    this.$refs.btn_submit.style.background = '#fa8919';
  } else {
    this.isDisable = true;  //不打勾时,不可以点击按钮
    this.$refs.btn_submit.style.background = '#999';
  }
},
/**
 *   提交按钮
 */
   check() {
      if (this.checkShow === false) {
          console.log('不能提交');
        } else { 
          console.log('能提交');
        }
      }
   }
}

以上这篇vue 实现特定条件下绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何导出json数据为excel表格并保存到本地

    vue如何导出json数据为excel表格并保存到本地

    这篇文章主要介绍了vue如何导出json数据为excel表格并保存到本地问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue.js或js实现中文A-Z排序的方法

    vue.js或js实现中文A-Z排序的方法

    下面小编就为大家分享一篇vue.js或js实现中文A-Z排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue框架render方法如何替换template

    vue框架render方法如何替换template

    这篇文章主要介绍了vue框架render方法如何替换template,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 彻底揭秘keep-alive原理(小结)

    彻底揭秘keep-alive原理(小结)

    这篇文章主要介绍了彻底揭秘keep-alive原理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue监听input标签的value值方法

    vue监听input标签的value值方法

    今天小编就为大家分享一篇vue监听input标签的value值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue3样式渗透之deep()为什么无效详解

    Vue3样式渗透之deep()为什么无效详解

    项目开发中因为ui设计常常需要修改vue常用的组件库(element,antD等等),这就需要用到样式穿透,下面这篇文章主要给大家介绍了关于Vue3样式渗透之deep()为什么无效的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue3中 provide 和 inject 用法小结

    vue3中 provide 和 inject 用法小结

    父子组件传递数据时,使用的是props和emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦,这篇文章主要介绍了vue3中 provide 和 inject 用法,需要的朋友可以参考下
    2023-11-11
  • vue接入腾讯防水墙代码

    vue接入腾讯防水墙代码

    这篇文章主要介绍了vue接入腾讯防水墙代码,代码超级简单,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • vue项目打包优化方式(让打包的js文件变小)

    vue项目打包优化方式(让打包的js文件变小)

    这篇文章主要介绍了vue项目打包优化方式(让打包的js文件变小),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 深入理解vue Render函数

    深入理解vue Render函数

    本篇文章主要介绍了深入理解vue Render函数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论