<!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>

最新文章

  1. 用jekyll制作高大上的网站(二)——实际应用
  2. Json字符串和Json对象的简单总结
  3. 最小生成树——prim算法
  4. android 最简单的自定义圆点view
  5. 大家一起写mvc(二)
  6. CSS系列:长度单位&amp;字体大小的关系em rem px
  7. FlashBuilder 4.7 win64 和 mac版 下载地址
  8. c#中SqlHelper类的编写(三)
  9. Java 中UDP原理机制及实现方式介绍(建议阅读者阅读前了解下Java的基础知识,一方便理解)
  10. JS笔记1
  11. Why SignalR does not use WebSockets?
  12. Check whether a given Binary Tree is Complete or not 解答
  13. linux下如何产生core,调试core
  14. shell脚本处理长参数的模板
  15. javascript中的自定义属性
  16. SparkSQL – 从0到1认识Catalyst(转载)
  17. 剑指Offer 51. 构建乘积数组 (数组)
  18. python测试开发django-48.xadmin上传图片django-stdimage
  19. pta l2-20(功夫传人)
  20. unity3D iTween的使用

热门文章

  1. 洛谷 P3182 [HAOI2016]放棋子(高精度,错排问题)
  2. Linux快速访问多个目录
  3. Unity3D 优化
  4. PHP Web Server 实例
  5. Bootstrap真的总是好的吗
  6. kali优化配置(2)
  7. python os 常用命令
  8. rmdir 删除空目录
  9. [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序
  10. 【容器化】容器技术实践.pdf_视频学习笔记