vue同意本站协议的制作
<!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同意本站协议的制作的更多相关文章
- 使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
本文作者:Jakub Juszczak 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35b ...
- 使用Vue.js 和Chart.js制作绚丽多彩的图表
前言 深入学习 chart.js 的选项来制作漂亮的图表.交互式图表可以给你的数据可视化提供很酷的展示方式.但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表. 这篇文章中,我会教你如何自 ...
- Vue整合d3.v5.js制作--柱状图(rect)
先上效果图: 图中柱状图变成纯蓝色是鼠标滑动过的颜色(颜色可改,本人配色能力十分的强,建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)) 1.环境说明 Vue版本:"vue": &q ...
- Vue整合d3.v5.js制作--折线图(line)
先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...
- 采用SmartQQ 协议可制作聊天机器人
采用.NET CORE可运行在 Linux . Windows 和 Mac OSX 平台下. SmartQQ可以: 收发文字消息 获取好友.群.讨论组.好友分组和最近会话的列表 SmartQQ不可以: ...
- vue事件的绑定
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery插件综合应用(一)注册
一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQuery插件的使用非常简单,如果只按照jQ ...
- jQuery插件综合应用1
jQuery插件综合应用(一)注册 一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQu ...
- React 表单受控组件
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
随机推荐
- 阿里大佬教你，如何写好 Java 代码！
点击上方蓝色链接,关注并"设为星标" Java干货,每天及时推送 阿里大佬分享的一篇很不错的文章,推荐收藏! 导读 明代王阳明先生在<传习录>谈为学之道时说: 私欲日生 ...
- java NIO介绍
前言 我们在写java程序的时候,为了进行优化,把全部的精力用在了处理效率上,但是对IO的关注却很少.这也可能是由以前java早期时JVM在解释字节码时速度慢,运行速率大大低于本地编译代码,因此以前往 ...
- Vue组件通信方式（一）
组件与组件的关系,通常有父子关系,兄弟关系以及隔代关系. 针对不同的场景,如何选用适合的通信方式呢? (一) props/$emit parentComponent ==> childCompo ...
- js去掉输入框的前后空格及一些常用正则表达式
去掉TextBox输入框两头的前后空格:onblur="this.value=this.value.replace(/^\s+|\s+$/g,'');" str为要去除空格的字符串 ...
- IE， Chrome和Firefox浏览器 差异对比
最近的项目中使用Extjs5.6, 其中主要的一个特点就是js文件的动态加载,之前使用Firefox浏览器对js文件进行调试,打断点时,只对当次调试有效,刷新之后,由于动态加载的js文件(文件名后面加 ...
- CSS的重用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- git常用相关操作
// 账号密码克隆远程项目 git clone http://账号:密码@项目地址 // 查看当前状态 git status // 查看修改内容 git diff // 添加并提交 git add . ...
- linux 根目录扩容
之前搭建了一个CentOS(7.0, x64)的VM,一直没留意它的硬盘空间.昨天,系统突然弹出警示,说 根目录 空间不足了. 这样的话,就只能给它增加空间呗. 我自己其实已经增加过硬盘空间了,但是为 ...
- 了解Greenplum（1）
了解系列废话: 数据管理系统实现,以Greenplum作为课后实验,这里将实验报告贴出来,纯粹灌水. 1.Greenplum架构 如上图所示,GP的基本结构是单master,多slave节点,客户端连 ...
- Conference - open source drives IOT from device to edge
Open source drives IOT from device to edge 以下都是针对IOT领域的项目: ACRN A Big Little Hypervisor for IoT Deve ...