<!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. HDU-1181 变形课(多种方式，好题)

      首先想到的是并查集,然后WA...原因在这,我第一次敲的是Find(1) == Find(12)来作为可以成功的条件,实际上这样是不行的,比方说 bell 和 mail实际上是不满足条件的,可以理 ...

  2. HDU-2571 命运(搜索，我才不是为了插图呢！哼！)

    看到这题其实感觉就是搜索题,广搜的话看讨论区里已经有人内存超限了,所以我选择了深搜,有两种思路,第一种是从起点出发,依次更新每一个格子的最大值,这样dp[n][m]就是最后的结果了,第二种是从起点试探 ...

  3. 【译】Redux 还是 Mobx，让我来解决你的困惑！

    原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用了 Redux,但我最近都在使用 Mob ...

  4. python random模块导入及用法

    random是程序随机数,很多地方用到,验证码,图片上传的图片名称等,下面说说python random模块导入及用法 1,模块导入 import random 2,random用法 random.r ...

  5. sparkStreaming复习笔记(1)

    一.SparkStreaming 1.sparkcore模块的扩展,具有可扩展,高吞吐量,容错机制,针对实时数据流处理,数据可以来自于kafka,flume以及tcp套接字,可以使用更加复杂的函数来进 ...

  6. openSSH学习笔记（一）

    OpenSSH 是 SSH (Secure SHell) 协议的免费开源实现.SSH协议族可以用来进行远程控制, 或在计算机之间传送文件.而实现此功能的传统方式,如telnet(终端仿真协议). rc ...

  7. vue实现搜索功能

    vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...

  8. Python单例模式的设计与实现【完美版】

    目录 1. 按 2. 本文地址 3. 通过继承单例父类来实现 4. 使用装饰器实现 4.1. 懒汉式 4.2. 饿汉式 4.2.1. 未加锁版 4.2.2. 加锁版 1. 按 众所周知,对象是解决继承 ...

  9. 8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台

    基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台 1.板卡概述 板卡由我公司自主研发,基于6UCPCI架构,处理板包含双片TI DSP TMS320C ...

  10. Firewalld--02 端口访问/转发、服务访问、源地址管理

    目录 防火墙端口访问/转发.服务访问.源地址管理 1. 防火墙端口访问策略 2. 防火墙服务访问策略 3.防火墙接口管理 4.防火墙源地址管理 5. 防火墙端口转发策略 防火墙端口访问/转发.服务访问 ...