Vue核心基础5:数据监测、收集表单数据、过滤器

1 数据监测

【代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>总结</title><script src="../js/vue.js"></script>
</head><body><div id="root"><h2>学生信息</h2><!-- 添加按钮,实现功能 --><button @click="student.age++">年龄+1</button><button @click="addSex">添加性别属性,默认值为男</button><button @click="updateSex">修改性别</button><button @click="addFriend">在朋友列表首位添加一个朋友</button><button @click="updatefirstF">修改第一个朋友的名字为:小章</button><button @click="addHobby">添加一个爱好</button><button @click="updatefirstHobby">修改第一个爱好为:吃饭</button><h3>姓名:{{student.name}} ---- 年龄:{{student.age}}</h3><h3 v-if="student.sex">性别:{{student.sex}}</h3><h3>朋友</h3><ul><li v-for="(fr,index) in student.friends" :key="index">姓名:{{fr.name}} -----年龄:{{fr.age}}</li></ul><h3>爱好</h3><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul></div><script>// 实现后添加的数据也能有响应式的功能const vm = new Vue({el: '#root',data: {name: 'Vue',address: '北京',student: {name: '张三',age: 18,hobby: ['学习', '喝酒', '烫头'],friends: [{ name: '李四', age: 32 },{ name: '王五', age: 29 }]}},methods: {addSex() {// 方法1:// vm.$set(vm.student, 'sex', '男')// 方法2:Vue.set(this.student, 'sex', '男')},updateSex() {this.student.sex = '女'},addFriend() {this.student.friends.unshift({ name: '赵六', age: 30 })},updatefirstF() {this.student.friends[0].name = '小章'},addHobby() {this.student.hobby.unshift('看片')},updatefirstHobby() {this.student.hobby.splice(0, 1, '吃饭')// Vue.set(this.student.hobby, 0, '吃饭')}},})</script>
</body></html>

总结: 


2 收集表单数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>收集表单数据</title><script src="../js/vue.js"></script>
</head><body><div id="root"><form action="" @submit.prevent="submit"><!-- 也可以直接放入label标签中 --><!-- <label>密码:<input type="password"></label> --><!-- 修饰符  trim, number, lazy --><!-- v-model.trim  去掉前后空格 --><label for="userName">账号:</label><input type="text" id="userName" v-model.trim="userInfo.account"><br><label for="passWord">密码:</label><input type="password" id="passWord" v-model.trim="userInfo.password"><br>性别:<input type="radio" name="sex" checked v-model="userInfo.sex" value="男">男<input type="radio" name="sex" v-model="userInfo.sex" value="女">女<br>年龄:<input type="number" v-model.number="userInfo.age"><br><!-- v-model.number 将写的内容收集成数字类型 -->爱好:学习<input type="checkbox" name="" v-model="userInfo.hobby" value="学习">吃饭<input type="checkbox" name="" v-model="userInfo.hobby" value="吃饭">睡觉<input type="checkbox" name="" v-model="userInfo.hobby" value="睡觉"><br>所属校区:<select v-model="userInfo.city"><option value="">请选择</option><option value="bj">北京</option><option value="nj">南京</option><option value="sh">上海</option><option value="sz">苏州</option></select><br><br>其它信息:<br><!-- 不希望实时收集  v-model.lazy --><textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br><br><input type="checkbox" name="" id="" v-model="userInfo.agreement">阅读并接受用户协议<a href="http://www.baidu.com">用户协议</a><br><br><br><button>提交</button></form></div><script>const vm = new Vue({el: '#root',data: {userInfo: {account: '',password: '',sex: '',hobby: [],city: '',other: '',agreement: '',age: ''}},methods: {submit() {console.log(JSON.stringify(this.userInfo))}},})</script>
</body></html>

总结:


3 过滤器

【代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过滤器</title><script src="../js/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
</head><body><div id="root"><h2>显示格式化后的当前时间</h2><!-- 1. 计算属性实现 --><h3>{{forTime}}</h3><!-- 2. methods实现 --><h3>{{getTime()}}</h3><!-- 3.过滤器实现 --><h3>{{time | formatTime}}</h3><!-- 过滤器传参 --><h3>{{time | formatTime('YYYY-MM-DD')}}</h3><!-- 截取 多个过滤器的串联--><h3>{{time | formatTime('YYYY-MM-DD') | mySlice}}</h3></div><script>// 配置全局的过滤器Vue.filter('mySlice', function (value) {return value.slice(0, 4)})const vm = new Vue({el: '#root',data: {time: 1707209007850},computed: {forTime() {return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}},methods: {getTime() {return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}},// 局部过滤器filters: {formatTime(time, str = 'YYYY-MM-DD HH:mm:ss') {return dayjs(time).format(str)},mySlice(value) {return value.slice(0, 4)}}})</script>
</body></html>

总结:

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT高效提问—prompt实践

ChatGPT高效提问—prompt实践 ​ 探索prompt在实际生活中的各种应用&#xff0c;旨在帮助理解和掌握如何将之前学到的prompt基础和技巧应用到具体实践中&#xff0c;从而在各个领域实现人工智能的价值。 ​ 通过生动的案例&#xff0c;发现并挖掘ChatGPT和prompt的无穷潜力。…

一个小而实用的 Python 包 pangu,实现在中文和半宽字符(字母、数字和符号)之间自动插入空格

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一个小巧的库&#xff0c;可以避免自己重新开发功能。利用 Python 包 pangu&#xff0c;可以轻松实现在 CJK&#xff08;中文、日文、韩文&#xff09;和半宽字符&#xff08;字母、数字和符号&#xf…

电路设计(15)——篮球赛24秒违例倒计时报警器的proteus仿真

1.设计要求 设计、制作一个篮球赛24秒违例倒计时报警器。要求&#xff1a; &#xff08;1&#xff09;具有倒计时功能。可完整实现从“24”秒开始依序倒计时并显示倒计时过程&#xff0c;显示时间间隔为1秒。 &#xff08;2&#xff09;具有消隐功能。当“24”秒倒计时…

nodejs切换版本

sudo n 18.17.0 sudo n然后键盘上下选择

PgSQL内核特性 - push-based pipeline 执行引擎

PgSQL内核特性 - push-based pipeline 执行引擎 数据库的SQL执行引擎负责处理和执行SQL请求。通常情况下&#xff0c;查询优化器会输出物理执行计划&#xff0c;一般由一系列的算子组成。当前&#xff0c;有两种算子流水线构建方式&#xff1a;1&#xff09;需求驱动的流水线&a…

AJAX——常用请求方法

1 请求方法 请求方法&#xff1a;对服务器资源&#xff0c;要执行的操作 2 数据提交 场景&#xff1a;当数据需要在服务器上保存 3 axios请求配置 url&#xff1a;请求的URL网址 method&#xff1a;请求的方法&#xff0c;GET可以省略&#xff08;不区分大小写&#xff09; …

防火墙安全策略及nat实验

要求一&#xff1a;生产区的设备在工作时间访问dmz区,仅可访问http服务器 要求二&#xff1a;办公区可以全天访问dmz区&#xff0c;其中10.0.2.20可以访问FTP服务器和HTTP服务器&#xff0c;10.0.2.10仅可以ping通10.0.3.10 要求三&#xff1a;办公区在访问服务器区时采用匿名认…

jsp课程教学管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 课程教学管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0…

【漏洞复现】狮子鱼CMS文件上传漏洞(wxapp.php)

Nx01 产品简介 狮子鱼CMS&#xff08;Content Management System&#xff09;是一种网站管理系统&#xff0c;它旨在帮助用户更轻松地创建和管理网站。该系统拥有用户友好的界面和丰富的功能&#xff0c;包括页面管理、博客、新闻、产品展示等。通过简单直观的管理界面&#xf…

基于LLM的业务流程自动化

在当今竞争激烈的商业环境中&#xff0c;业务流程&#xff08;尤其是文档处理工作流程&#xff09;的自动化对于寻求提高效率和减少人工错误的公司来说变得至关重要。 传统方法往往难以跟上任务的数量和复杂性&#xff0c;而人工主导的流程速度缓慢、容易出错&#xff0c;并且可…

零基础学编程从哪里入手,编程实例分享,配件进出库管理系统软件

零基础学编程从哪里入手&#xff0c;编程实例分享&#xff0c;配件进出库管理系统软件 一、前言 对于刚学编程的人来说&#xff0c;多看看现有的软件实例对自己学开发软件是很有帮助的。 下面分享的实例以配件进出库管理系统软件为例说明。 软件文件下载可以点击最下方官网…

线性代数的本质——1 向量

向量是线性代数中最为基础的概念。 何为向量&#xff1f; 从物理上看&#xff0c; 向量就是既有大小又有方向的量&#xff0c;只要这两者一定&#xff0c;就可以在空间中随便移动。 从计算机应用的角度看&#xff0c;向量和列表很接近&#xff0c;可以用来描述某对象的几个不同…

S32 Design Studio的PE工具

S32 Design Studio软件是NXP公司专门为了方便用户开发S32K1系列芯片的IDE&#xff0c;跟Eclipse比较像。里面有个配套的图形工具Processor Expert&#xff0c;会产生一个后缀名为pe的文件&#xff0c;跟ST的cubemx作用类似。 双击pe文件即可打开pe界面&#xff0c;生成的文件将…

力扣hot100 -- 双指针

目录 &#x1f382;移动零 &#x1f319;盛最多水的容器 &#x1f33c;三数之和 &#x1f33c;接雨水 前缀和 辅助数组 双指针 单调栈 &#x1f382;移动零 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 关于swap #include <iostream> #include <vec…

每日五道java面试题之java基础篇(五)

第一题. final、finally、finalize 的区别&#xff1f; final ⽤于修饰变量、⽅法和类&#xff1a;final 修饰的类不可被继承&#xff1b;修饰的⽅法不可被重写&#xff1b;修饰的变量不可变。finally 作为异常处理的⼀部分&#xff0c;它只能在 try/catch 语句中&#xff0c;…

JavaScript DOM 变动观察器(Mutation observer)

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 DOM 变动观察 是 web 开发中的一个重要概念&#xff0c;指的是监视 …

《21天精通IPv4 to IPv6》第9天:云和容器中的IPv6——如何在云端☁️容器中实现IPv4到IPv6?

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

Netty应用(七) 之 Handler Netty服务端编程总结

目录 15.Handler 15.1 handler的分类 15.1.1 按照方向划分 15.1.2 handler的结构 15.2 输入方向ChannelInboundHandlerAdapter 15.2.1 输出方向Handler的顺序 15.2.2 多个输入方向Handler之间的数据传递 15.2.2.1 handler消失了 15.2.2.2 手动编写netty提供的new Strin…

【C++】容器适配器结构的设计

目录 介绍&#xff1a; 一&#xff0c;queue结构的设计 二&#xff0c;priority_queue结构设计 三&#xff0c;stack结构设计 介绍&#xff1a; 适配器 适配器是一种设计模式&#xff0c;而设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计的总结&…

【机器学习】全网最全模型评价指标(性能指标、YOLOv5训练结果分析、轻量化指标、混淆矩阵详解)【基础收藏】

&#x1f951; Welcome to Aedream同学 s blog! &#x1f951; 文章目录 模型性能指标常见指标ROC/AUCROC & PRC多分类问题——混淆矩阵 计算结果分析——以YOLO v5为例1. confusion_matrix.png(混淆矩阵)2. F1_curve&#xff1a;3. labels.jpg4. labels_corrrelogram.jpg5…