<!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. Can you answer these queries? HDU 4027 线段树

    Can you answer these queries? HDU 4027 线段树 题意 是说有从1到编号的船,每个船都有自己战斗值,然后我方有一个秘密武器,可以使得从一段编号内的船的战斗值变为原来 ...

  2. 嵌入式软件工程师C语言经典笔试1

    一. 预处理器(Preprocessor) 1.1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEAR (60 * 6 ...

  3. Python之字符串和正则表达式

    使用正则表达式 Python对正则表达式的支持 例子:替换字符串中的不良内容 import re def main(): sentence = '你丫是傻叉吗? 我操你大爷的. Fuck you.' ...

  4. HNUSTOJ-1696 简单验证码识别(模拟)

    1696: 简单验证码识别 时间限制: 2 Sec  内存限制: 128 MB 提交: 148  解决: 44 [提交][状态][讨论版] 题目描述 验证码是Web系统中一种防止暴力破解的重要手段.其 ...

  5. JavaScript数组增删方法总结

    数组是JavaScript中常见的一个对象,在这篇文章中主要整理数组增删改查方面的相关操作方法. 首先我们创建一个数组 添加元素: push(elment) 从后面添加元素,返回数组的长度   uns ...

  6. Python之路-Python中的线程与进程

    一.发展背景 任务调度 大部分操作系统(如Windows.Linux)的任务调度是采用时间片轮转的抢占式调度方式,也就是说一个任务执行一小段时间后强制暂停去执行下一个任务,每个任务轮流执行.任务执行的 ...

  7. mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉

    空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...

  8. pg_dumpall - 抽出一个 PostgreSQL 数据库集群到脚本文件中

    SYNOPSIS pg_dumpall [ option...] DESCRIPTION 描述 pg_dumpall 是一个用于写出("转储")一个数据库集群里的所有 Postgr ...

  9. 211-基于FMC的ADC-DAC子卡

    基于FMC的ADC-DAC子卡 一.板卡概述 FMC-1AD-1DA-1SYNC是我司自主研发的一款1路1G AD采集.1路2.5G DA回放的FMC.1路AD同步信号子卡.板卡采用标准FMC子卡架构 ...

  10. 王垠-40行代码 -cps.ss

    ;; A simple CPS transformer which does proper tail-call and does not ;; duplicate contexts for if-ex ...