<!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. java学习day3运算符

    一.算数运算符 1.对于除号“/”,它的整数除和小数除是有区别的:当整数除以整数的时候,会把结果的小数部分舍弃,只保留整数部分,例如: int x=3510; x=x/1000; 输出结果为x=3; ...

  2. dfs(枚举)

    http://codeforces.com/gym/100989/problem/L L. Plus or Minus (A) time limit per test 1.0 s memory lim ...

  3. hdu6357 Hills And Valleys (最长不下降子序列)

    题目传送门 题意: 给你0~9的字符串,问你翻转哪个区间后使得其最长不下降子序列长度最长 思路: 因为字符是0~9,所以我们可以定义一个b数组来枚举L,R, 去和原来的字符串去求最长公共子序列长度,不 ...

  4. 模块管理常规功能自己定义系统的设计与实现(15--进一步完好"省份"模块)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jfok/article/details/24737483 "省份"模块的进一步完 ...

  5. LNMP集群架构篇

    一.LNMP介绍 1.使前端web服务和后端存储服务进行串联 2.主要实现处理php动态请求 工作原理: L:linux  N:nginx  M:mysql   P:php 二.lnmp部署 我的环境 ...

  6. Git命令——撤销修改

    Git命令 1. 撤销修改 (1) 当改乱了工作区(working directory)某个文件的内容,想直接丢弃工作区中的修改时,用命令git checkout -- file. (2) 当不但改乱 ...

  7. readlink 查看符号链接的文件的内容

    1. 命令功能 readlink 查看软链接文件里的真实内容. 2. 语法格式 readlink [option]  file 参数 参数说明 -f 后跟软链接文件 3. 使用范例 范例1 查看文件链 ...

  8. ps:界面概览

    首先我们来认识一下Photoshop的界面组成,如下图是一个典型的界面.为了方便识别,我们加上了颜色和数字. 1:顶部的红色区域是菜单栏,包括色彩调整之类的命令都存放在从菜单栏中.在我们的教程中使用[ ...

  9. Nginx-配置负载均衡实例

    配置负载均衡实例 实现效果: 配置负载均衡 实验代码 1) 首先准 备两个同时启动的 Tomcat 2) 在 nginx.conf 中进行配置 随着互联网信息的爆炸性增长,负载均衡(load bala ...

  10. 自定义日志注解 + AOP实现记录操作日志

      需求:系统中经常需要记录员工的操作日志和用户的活动日志,简单的做法在每个需要的方法中进行日志保存操作, 但这样对业务代码入侵性太大,下面就结合AOP和自定义日志注解实现更方便的日志记录   首先看 ...