<!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. python学习第四十二天列表生成式用法及作用

    在操作列表或者元组的时候,对一系列的数据进行算法,比较整个数据加1,或翻倍,用传统的算法就很繁琐,列表给我们提供简便的方法 a=[i*i for i in rang(10)] a=[1,4,9,16, ...

  2. TAB切换与内容伸展闭合的结合

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 最好用的 Kafka Json Logger Java客户端，赶紧尝试一下

    最好用的 Kafka Json Logger Java客户端. slf4j4json 最好用的 Kafka Json Logger 库:不尝试一下可惜了! Description 一款为 Kafka ...

  4. python的list内存分配算法

    前提:python为了提高效率会为list预先分配一定的内存空间供其使用,避免在每次append等操作都去申请内存,下面简单分析下list的内存分配算法,主要就是两段. 1.当没有元素时,newsiz ...

  5. c++函数参数或返回值为函数指针

    C++中函数指针的形式为:返回值类型 + 参数类型,函数没有值类型,但是却可以声明函数的指针,因为函数是可寻址的,存放在内存中的代码段,可以从指针访问. 函数指针可以声明为: void (*pF)(v ...

  6. window 批处理脚本获取上级目录

    1 SET CurrDir=%CD% CD.. SET InstPath=%CD% CD %CurrDir% 2 pushd.. set parent=%cd% popd 参考: https://ms ...

  7. layui树形表格支持非异步和异步加载

    layui树形表格支持非异步和异步加载. 仓库地址:https://gitee.com/uniqid/ 使用示例如下: <div class="uui-admin-common-bod ...

  8. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

  9. maven之assembly插件

    传送门 https://blog.csdn.net/WANGYAN9110/article/details/38646677/ http://blueram.iteye.com/blog/168407 ...

  10. Flask学习笔记02之配置文件

    1. Flask默认的配置 Flask实例中包含了它的配置信息 #实例化一个Flask对象 app = Flask(__name__) # 打印默认配置信息 print(app.config) 打印结 ...