<!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. nginx 499错误

    原因: 服务响应时间太长,客户端自动断开链接. 解决: 1. 找到响应世间长的接口,看依赖的数据源(数据库,第三方接口等)响应时间是否超时,还是自己程序有逻辑问题. 可以通过加入日志打印时间消耗来确定 ...

  2. AppDomain (转)

    AppDomain是CLR的运行单元,它可以加载Assembly.创建对象以及执行程序.AppDomain是CLR实现代码隔离的基本机制. 每一个AppDomain可以单独运行.停止:每个AppDom ...

  3. mysql常见的查询语句

    select * from 表名     查询此表所有数据  select * from 表名 where 字段名 > 判断条件      查询某表中的某字段符合条件的数据 select * f ...

  4. 【推荐系统】知乎live入门5.常用技能与日常工作

    参考链接 [推荐系统]知乎live入门 目录 1. 实习与求职 2. 推荐算法职责 3. 解构算法 4. 参考资料 5. 其他强关联岗位 6. 工作模型和日常工作 7. 2017年相关论文 8. 找工 ...

  5. MySQL解决忘记密码问题

    解决Win10下Mysql 的Access denied for user'root'@'localhost' (using password: NO)问题 mysql一旦忘记密码即会出现这样的错误. ...

  6. vue路由守卫配合权限，白名单

    router.beforeEach(async(to, from, next) => { // 进度条开始 NProgress.start() // 确认用户是否已登录(获取它的token值,这 ...

  7. 第四讲 自定义Realm来实现身份认证

    1.jdbcReam已经实现了从数据库中获取用户的验证信息,但是jdbcRealm灵活性太差.如果要实现自己的一些特殊应用时,将不能支持.这时,可以通过自定义Realm来实现身份的认证功能. 2.Re ...

  8. .NetCore模拟Postman的BasicAuth生成Authrization

    一.思路 BasicAuth 是一种简单权限,传输UserName=<userName>,Password=<password> 1.用:连接Username,Password ...

  9. Python在windows下编译成exe文件

    1. pip install pyinstaller 2. 在Terminal下输入:“pyinstaller -F -w  *.py” 就可以生成exe.生成的文件放在同目录dist下. -F(注意 ...

  10. ffmpeg windows下编译安装

    安装msys2 更新源使下载速度更快 进入msys64/etc/pacman.d/目录中,分别在三个文件中增加mirrorlist.mingw32Server = http://mirrors.ust ...