vue前端开发自学demo-input标签数据双向绑定

vue前端开发自学demo-input标签数据双向绑定!今天为大家 展示的内容是,前端开发常见的,form表单里面的,一些输入数据的元素,动态绑定数据的案例。比如input,以及checkbox的状态绑定案例。

首先,老规矩,贴代码。

<template>
    <h3>input数据动态绑定</h3>
    <input type="input" v-model="message"/>
    <p>您输入的是:{{ message }}</p>
    <hr>
    <form action="#">
        <input type="checkbox" id="term"  v-model="checked" />
        <label for="term" >我同意以上所有服务条款</label> 
        
        <button @click="register">注册</button>
    </form>
</template>
<script>
    export default{
        data(){
            return{
                message:"",
                checked:false
            }
        },
        methods:{
            register(){
                if(this.checked){
                    console.log('您同意了条款内容,点击了register');
                }else{
                    console.log("请您务必仔细阅读条款内容,勾选同意");
                }                            
            }
        }            
    }
</script>

如图所示,第一个部分内容,是input数据动态绑定的内容。第二个部分代码是checkbox的动态绑定,可以实时的跟踪到chexkBox的选中与否。

下面是展示的效果截图。第一张图是,如果用户勾选了,“我同意所有条款内容”切点击了注册按钮,触发了register的情况

如图,用户勾选了之后,点击注册按钮,打印在控制台的信息。就是我们提前做了checkbox状态的判定了。true(勾选后,就是ture)(默认状态是false)

这个截图,是用户没有勾选checkbox的时候,默认状态 是false,点击注册按钮,进入了else代码块内。执行了控制台打印信息。

vue提供的这种指令【v-model】,很惬意,可以极大的提升前端开发人员的工作效率。难怪它一上市,就受到了业界的喜欢和青睐。名副其实的“为大众着想”!后续还会持续更新其他的vue自学内容。欢迎大家留言互动。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/309708.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity WebView 中文输入支持

使用版本&#xff1a;Vuplex 3D WebView for Windows v4.4&#xff1b; 测试环境&#xff1a;unity editor 2020.3.40f1c1、Windows&#xff1b; 1、打开脚本CanvasWebVie!wPrefab 2、找到_initCanvasPrefab方法&#xff0c;约略在459行附近 3、添加一行代码&#xff1a; …

大创项目推荐 深度学习手势检测与识别算法 - opencv python

文章目录 0 前言1 实现效果2 技术原理2.1 手部检测2.1.1 基于肤色空间的手势检测方法2.1.2 基于运动的手势检测方法2.1.3 基于边缘的手势检测方法2.1.4 基于模板的手势检测方法2.1.5 基于机器学习的手势检测方法 3 手部识别3.1 SSD网络3.2 数据集3.3 最终改进的网络结构 4 最后…

设计模式-策略模式+单例模式+工厂模式 减少 if else

目录 一. 需求一. 区分entity二. 接口三. 邮件发送类四. 邮件发送的聚合工厂类五. 模拟邮件发送 一. 需求 根据前台传入的code&#xff0c;后台发送不同平台的邮件&#xff0c;发送QQ邮件&#xff0c;163邮件&#xff0c;Gmail邮件等。 一. 区分entity public class MailKbn…

使用懒加载 + 零拷贝后,程序的秒开率提升至99.99%

目录 一、5秒钟加载一个页面的真相二、优化四步走1、“懒加载”2、线上显示 就读取一个文件&#xff0c;为什么会慢呢&#xff1f; 三、先从上帝视角&#xff0c;了解一下啥子是IO流四、写个栗子&#xff0c;测试一下1、通过字符输入流FileReader读取2、通过缓冲流BufferedRea…

Qt QPushButton按钮控件

文章目录 1 属性和方法1.1 文本1.2 图标1.3 样式表1.4 信号 2 实例2.1 布局2.2 添加图标2.3 添加样式表2.4 代码实现 1 属性和方法 按钮除了可以设置显示文本之外&#xff0c;还可以设置图标 1.1 文本 可以获取和设置按钮上显示的文本 // 获取和设置按钮的文本 QString tex…

Apache ActiveMQ RCE CNVD-2023-69477 CVE-2023-46604

漏洞简介 Apache ActiveMQ官方发布新版本&#xff0c;修复了一个远程代码执行漏洞&#xff0c;攻击者可构造恶意请求通过Apache ActiveMQ的61616端口发送恶意数据导致远程代码执行&#xff0c;从而完全控制Apache ActiveMQ服务器。 影响版本 Apache ActiveMQ 5.18.0 before 5.1…

四次挥手的详细过程以及个人见解

SYN同步SYN表示进行一个连接请求 ACK确认位ACK1确认有效ACKO确认无效 ack确认号&#xff0c;客户端的序列号(seq)1 seq序列号&#xff0c;序列号是随机生成的随机数 FIN表示断开连接并且会停止向服务端发数据 详细过程如图&#xff1a; 第一次:客户端向服务器发出关闭请求…

构建中国人自己的私人GPT

创作不易&#xff0c;请大家多鼓励支持。 在现实生活中&#xff0c;很多人的资料是不愿意公布在互联网上的&#xff0c;但是我们又要使用人工智能的能力帮我们处理文件、做决策、执行命令那怎么办呢&#xff1f;于是我们构建自己或公司的私人GPT变得非常重要。 先看效果 一、…

YOLOv8改进 | 检测头篇 | 利用DynamicHead增加辅助检测头针对性检测(四头版本)

一、本文介绍 本文给大家带来的改进机制是针对性的改进,针对于小目标检测增加P2层,针对于大目标检测增加P6层利用DynamicHead(原版本一比一复现,全网独一份,不同于网上魔改版本)进行检测,其中我们增加P2层其拥有更高的分辨率,这使得模型能够更好地捕捉到小尺寸目标的细节…

element ui el-table展示列表,结合分页+过滤功能

vueelement-ui实现的列表展示&#xff0c;列表分页&#xff0c;列表筛选功能 1&#xff0c;分页器 el-table模块下面是分页器代码 <el-pagination></el-pagination> <el-table></el-table> <!-- 分页器 --><div class"block" st…

IO进程线程day5

1.实现互斥机制 #include <head.h>char buf[128]; //全局数组&#xff0c;临界资源//1、创建一个互斥锁 pthread_mutex_t mutex;//定义分支线程 void *task(void *arg) {while(1){//3、获取锁资源pthread_mutex_lock(&mutex);printf("分支线程中&…

论文阅读《Generalizing Face Forgery Detection with High-frequency Features》

高频噪声分析会过滤掉图像的颜色内容信息。 本文设计了三个模块来充分利用高频特征&#xff0c; 1.多尺度高频特征提取模块 2.双跨模态注意模块 3.残差引导空间注意模块&#xff08;也在一定程度上体现了两个模态的交互&#xff09; SRM是用于过滤图像的高频噪声 输入的图…

AlexNet论文精读

1:该论文解决了什么问题&#xff1f; 图像分类问题 2&#xff1a;该论文的创新点&#xff1f; 使用了大的深的卷积神经网络进行图像分类&#xff1b;采用了两块GPU进行分布式训练&#xff1b;采用了Relu进行训练加速&#xff1b;采用局部归一化提高模型泛化能力&#xff1b;…

Linux 基于 rsync 实现集群分发脚本 xsync

一、rsync 简介 rsync&#xff08;remote synchronize&#xff09;是 Liunx/Unix 下的一个远程数据同步工具。它可以通过 LAN/WAN 快速同步多台主机间的文件和目录&#xff0c;并适当利用 rsync 算法&#xff08;差分编码&#xff09;以减少数据的传输。 rsync 算法并不是每一次…

Explain详解与索引最佳实践

听课问题(听完课自己查资料) type中常用类型详细解释 null <- system <- const <- er_ref <- ref <- range <- index <- all Explain 各列解释 EXPLAIN SELECT* FROMactorLEFT JOIN film_actor ON actor_id actor.id; 1. id 代表执行的先后顺序 比如…

如何对制作好的查询进行编辑和导出?

发布者已经创建好了查询&#xff0c;如发现数据有误&#xff0c;想要进行修改&#xff0c;或者想要将收集好的表格进行导出&#xff0c;应该如何操作&#xff1f;本次就来介绍如何使用此功能。 &#x1f4d6;案例&#xff1a;教师荣誉核对系统 在开启可修改列功能的教师荣誉核对…

Laravel 使用rdkafka_laravel详细教程(实操避坑)

一、选择rdkafka 首先要看版本兼容问题&#xff0c;我的是Laravel5.6&#xff0c;PHP是7.3.13&#xff0c;所以需要下载兼容此的rdkafka&#xff0c;去 Packagist 搜索 kafka &#xff0c;我用的是 Packagist选择里面0.10.5版本&#xff0c; 二、安装rdkafka 在 Laravel 项目…

宋仕强论道之华强北精神和文化(二十一)

华强北的精神会内化再提炼和升华成为华强北文化&#xff0c;在外部会流传下去和传播开来。在事实上的行动层面&#xff0c;就是华强北人的思维方式和行为习惯&#xff0c;即见到机会就奋不顾身敢闯敢赌&#xff0c;在看似没有机会的时候拼出机会&#xff0c;和经济学家哈耶克企…

RT-DETR 更换主干网络之 ShuffleNetv2 | 《ShuffleNet v2:高效卷积神经网络架构设计的实用指南》

目前,神经网络架构设计多以计算复杂度的间接度量——FLOPs为指导。然而,直接的度量,如速度,也取决于其他因素,如内存访问成本和平台特性。因此,这项工作建议评估目标平台上的直接度量,而不仅仅是考虑失败。在一系列控制实验的基础上,本文得出了一些有效设计网络的实用指…

NPS配置https访问web管理页面

因为NPS默认也支持http的访问&#xff0c;所以在部署完后就一直没在意这个事情。 因为服务器是暴露在公网内的&#xff0c;所以还是要安全一点才行。不然一旦远控的机器被破解了就很危险了 一、使用nginx反向代理访问 1、首先在nps的配置文件里关闭使用https选项&#xff0c;…