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 实现特定条件下绑定事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue 动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了. 基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结. 城市列表选择组件 首先说说我们要实现一个什么样的城市选择组

  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g

  • vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le

  • Vue根据条件添加click事件的方式

    需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div> 方式二:用v-if .v-else-if.v-else 判断 <div v-if=&q

  • vue的事件绑定与方法详解

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'body', methods : { say : function(){ alert( '欢迎学习vue' ); } } }); } <input type="button" value="点我" v-on:click="say();"/>

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

    今天写了个小功能,看起来挺简单,写的过程中发现了些坑. 1.div没有disabled的属性,所以得写成button 2.disabled在data时,默认是true,使得初始化时,默认置灰按钮,无法点击 <div class='form-item'> <div class="checkWrap clearfix" @click='checkMark()'> <div class="checkBox" v-show="chec

  • vue实现绑定事件的方法实例代码详解

    一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法  <button v-on:click="alert('hi')">执行方法的第一种写法</button> 2.调用method的办法 <button v-on:click="run()">执行方法的第

  • vue 通过绑定事件获取当前行的id操作

    如下所示: <div @click="router(items.productId)" style="float: left;" :key='items.productName' v-for="items in item"> </div> 获取: router(e){ conslone.log(e); } 补充知识:Vue.js的事件(单双击.鼠标和键盘)以及阻止事件冒泡 自己随便琢磨了一个小的Demo,实现了一些事件和阻

  • vue项目input标签checkbox,change和click绑定事件的区别说明

    vue项目input标签checkbox,change和click绑定事件的区别说明

    目录 input标签checkbox,change和click绑定事件的区别 input标签中checkbox类型的相关操作总结 一.checked属性 二.操作 三.关于checkbox的其他操作 input标签checkbox,change和click绑定事件的区别 我们经常在vue开发项目的过程中,遇到需要对input框使用v-modal的这种情况,在有的时候,不光需要双向数据绑定,还需要在改变数据之后绑定其它的操作,那么问题来了,你是使用@change绑定事件还是使用@click绑定事件

  • 解决VUE框架 导致绑定事件的阻止冒泡失效问题

    前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效. 而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了.无论是return false 还是event.stopPropagation();都无效. 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()' .stop .prevent .capture .self

  • vue.js绑定事件监听器示例【基于v-on事件绑定】

    vue.js绑定事件监听器示例【基于v-on事件绑定】

    本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

  • 基于vue.js中关于下拉框的值默认及绑定问题

    一.今天遇到vue中下拉框问题,故而写点东西留个脚印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled"> {{ option.tex

  • layerUI下的绑定事件实例代码

    实例如下: $(document).on("click",".admin-side-friend",function(){ layer.open({ title: 'YouTube', maxmin: true, type: 2, content: 'video.html', area: ['800px', '500px'] }); }); 以上这篇layerUI下的绑定事件实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue绑定事件后获取绑定事件中的this方法

    使用$event传递参数(事件本身) <input v-model="checknames" @change="changecheckbox(item,$event)" style="float: right" type="checkbox" :value="index" > changecheckbox(val,element) { console.log( element.currentTa

随机推荐