<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<h5>表单提交</h5>
<form v-on:submit.prevent="handleSubmit">
<input type="checkbox" v-bind:checked="isChecked" v-on:click="handleDisabled"/>
是否同意本站协议
<br>
<button v-bind:disabled="isDisabled">提交</button>
</form>
</div>
<script>
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
isDisabled:false,
isChecked:false
},
//methods对象
methods:{
//通过methods来定义需要的方法
handleDisabled:function(){
this.isChecked = !this.isChecked;
if(this.isChecked==true){
this.isDisabled = true;
}
else{
this.isDisabled = false;
}
}
}
})
</script>
</body>
</html>

vue同意本站协议的制作的更多相关文章

  1. 使用 Vue.js 和 Chart.js 制作绚丽多彩的图表

    本文作者:Jakub Juszczak 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35b ...

  2. 使用Vue.js 和Chart.js制作绚丽多彩的图表

    前言 深入学习 chart.js 的选项来制作漂亮的图表.交互式图表可以给你的数据可视化提供很酷的展示方式.但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表. 这篇文章中,我会教你如何自 ...

  3. Vue整合d3.v5.js制作--柱状图(rect)

    先上效果图: 图中柱状图变成纯蓝色是鼠标滑动过的颜色(颜色可改,本人配色能力十分的强,建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)) 1.环境说明 Vue版本:"vue": &q ...

  4. Vue整合d3.v5.js制作--折线图(line)

    先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...

  5. 采用SmartQQ 协议可制作聊天机器人

    采用.NET CORE可运行在 Linux . Windows 和 Mac OSX 平台下. SmartQQ可以: 收发文字消息 获取好友.群.讨论组.好友分组和最近会话的列表 SmartQQ不可以: ...

  6. vue事件的绑定

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jQuery插件综合应用(一)注册

    一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQuery插件的使用非常简单,如果只按照jQ ...

  8. jQuery插件综合应用1

    jQuery插件综合应用(一)注册   一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQu ...

  9. React 表单受控组件

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. Spring MVC-学习笔记(1)认识spring mvc

    1.基于XML Schema.Controller接口的spring mvc简单例子 1>创建一个动态Web项目,选择同时创建web.xml文件 2>在WEB-INF/lib中粘贴spri ...

  2. 实现简单的计算器(设计UI)

    要点说明: 1.一个textedit控件,其余全部是button控件,button布局方式:栅格布局(Grid layout) 2.对窗体的Title进行修改(默认是工程名) 3.在ui文件中设计的U ...

  3. NGUI的怎么在一个Gameobject(游戏物体)中调用另一个Gameobject(游戏物体)的脚本(C#)

    一,在C#代码中,我们都知道可以给游戏物体添加一个脚本,如下图 二,在当前我们是可以调用到该游戏物体脚本定义的变量,但是我们要在其他脚本调用怎么办?如下代码, KnapSackItem kn = it ...

  4. Javascript | DOM\DOM树浅析

    DOM Document Object Model(文档对象模型) 定义了表示和修改文档所需的方法. DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合.也有人称D ...

  5. 二gradle创建SSM项目——Hello word

    一创建gradle web项目 1.以下是我的项目结构web工程+工具module,mapper用来存放mybatis-plus自动生成类,通过 MpGenerator.class 生成.   项目结 ...

  6. Mac xlwings aem.aemsend.EventError: Command failed: The user has declined permission. (-1743)

    aem.aemsend.EventError: Command failed: The user has declined permission. (-1743) 关于mac pycharm 使用xl ...

  7. DataFrame.loc的区间

    df.loc[dates[0:1],'E']和df.loc[dates[0]:dates[1],'E']不同. 前者不包含dates[1],后者是包含dates[1]的. 根据Python3中实际代码 ...

  8. hdu 6127 : Hard challenge (2017 多校第七场 1008)(计算几何)

    题目链接 题意:二维平面上有n个点(没有重叠,都不在原点,任意两点连线不过原点),每个点有一个权值,用一条过原点的直线把他们划分成两部分,使两部分的权值和的乘积最大.输出最大的乘积. 极角排序后,将原 ...

  9. datatables屏蔽警告弹窗

    //不显示任何错误信息 $.fn.dataTable.ext.errMode = 'none'; //以下为发生错误时的事件处理,如不处理,可不管. $('#tableId').on( 'error. ...

  10. java 构造方法中super()的作用?

    手贱百度了一下 :java里面自定义类的有参构造方法为什么不用super() 举个例子: class Father { Father(){print ('father');}; } class Son ...