Vue基本学习2
Vue使用方法
<script src="js/vue.js"></script><script>/*** Mode1:数据模型,负责数据存储(后台业务逻辑/数据库)* View:视图层,负责页面展示(HTML)* View Model(Vue):负责业务逻辑处理(比如Ajax请求等)* view 与 Model 数值保持一致,互相影响,双向绑定* */new Vue({el:"#app", // view 监听的范围data:{ //Modelmessage: 10 ,guojia: 3},//监控监听data的数据是否发生变化watch:{message(newValue,oldValue){console.log("message的值是: "+oldValue+" To "+newValue);},guojia(newValue,oldValue){console.log("guojia的值是: "+oldValue+" To "+newValue)}},//常用的自定义方法methods:{anniu:function(){alert("按钮已经被单击");}}})</script>
◆ v-if:根据表达式的真假来插入和删除元素
在这里插入代码片
◆ v-else:v-else指令为v-if添加一个“else块”
◆ v-show:控制切换一个元素的显示和隐藏
◆ v-on:为 HTML 元素绑定事件监听
v-on后面可以增加修饰符
◼ .stop:调用event.stopPropagation()
◼ .prevent : 调用event.preventDefault()
◼ .self : 只当时间是从侦听器绑定的元素本身触发时才触
发回调
◼ .{keycode} : 只在指定键上触发回调
使用v-on: 监听button按钮,一旦点击执行anniu()函数; new Vue({el:"#app", // view 监听的范围
data:{ //Modelmessage: 10 ,guojia: 3},
使用watch来监控监听data的数据是否发生变化watch:{message(newValue,oldValue){console.log("message的值是: "+oldValue+" To "+newValue);},guojia(newValue,oldValue){console.log("guojia的值是: "+oldValue+" To "+newValue)} methods:{anniu:function(){alert("按钮已经被单击");}}})
◆ v-model:将用户的输入同步到视图上
// 能轻松实现表单输入和应用状态之间的双向绑定
// 双向绑定
// 指的是我们在vue实例中的data与其渲染的dom元素上 的内容保持一致,两者无论谁被改变,另一方也会相应 的更新为相同的数据
v-model = 变量
v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上
◆ v-bind:绑定 HTML 元素的属性
v-bind可以在其名称后面带一个参数,参数通常是HTML元素的
特性(attribute),v-bind是动态绑定指令,默认情况下自带属
性的值是固定的,为了能够动态的给这些属性添加值可以使用v
bind指令
◆ v-bind:属性名 = ‘表达式’
◆ 简写形式:v-bind可以省略,直接书写为 :属性名 = ‘表达式’
等价于 //绑定一个属性
//绑定多个属性
[点击并拖拽以移动]
◆ v-for :遍历 data 中的数据,并在页面进行数据展示
◆ 遍历 data 中的数据,并在页面进行数据展示
◆ v-for =(item, index) in items
◼ item 表示每次遍历得到的元素
◼ index 表示item的索引,可选参数
◼ items表示数组或者对
[点击并拖拽以移动]
test4.html利用
<h1 style="color: antiquewhite;width:40%;margin-left: 30%;text-align: center">学生信息管理</h1><div id="app"><table border="1"><tr><td>姓名</td><td>学号</td><td>年级</td><td>年级名</td><td>身份证</td><td>密码</td><td>电话</td><td>性别</td><td>地址</td><td>生日</td><td>邮箱</td><td colspan="2">操作</td></tr><tr v-for="item in Studentlist"><td>{{item.studentName}}</td><td>{{item.studentNo}}</td><td>{{item.gradeId}}</td><td>{{item.gradeName}}</td><td>{{item.identityCard}}</td><td>{{item.loginPwd}}</td><td>{{item.phone}}</td><td>{{item.sex}}</td><td>{{item.address}}</td><td>{{item.bornDate}}</td><td>{{item.email}}</td><td><input type="button" value="修改" @click="student=item" /></td><td><input type="button" value="删除" @click="delStudent(item.studentNo)" /></td></tr></table><h2 style="color: antiquewhite;width:40%;margin-left: 30%;text-align: center">增加学生信息</h2><table><tr><td style="text-align: right;"><b>学生姓名:</b></td><td style="text-align: left;"><input v-model="student.studentName" /></td></tr><tr><td style="text-align: right;"><b>学生密码:</b></td><td style="text-align: left;"><input v-model="student.loginPwd" /></td></tr><tr><td style="text-align: right;"><b>学生性别:</b></td><td style="text-align: left;"><input v-model="student.sex" /></td><!-- 男性选项 --><!-- 女性选项 --></td></tr><tr><td style="text-align: right;"><b>班级编号</b></td><td style="text-align: left;"><input v-model="student.gradeId" /><!-- <select ><option v-for="item in gradeList" :value="item.gradeId">{{item.gradeName}}</option></select> --></td></tr><tr><td style="text-align: right;"><b>手机号:</b></td><td style="text-align: left;"><input v-model="student.phone" /></td></tr><tr><td style="text-align: right;"><b>家庭地址:</b></td><td style="text-align: left;"><input v-model="student.address" /></td></tr><tr><td style="text-align: right;"><b>学生邮箱:</b></td><td style="text-align: left;"><input v-model="student.email" /></td></tr><tr><td><input type="hidden" id="studentNO" /></td></tr><tr><td style="text-align: right;"><input type="button" value="添加" @click="addStudent"/></td><td style="text-align: right;"><input type="button" value="修改" @click="updateStudent"/></td></tr></table>
</div>
[点击并拖拽以移动]
相关文章:
Vue基本学习2
Vue使用方法 <script src"js/vue.js"></script><script>/*** Mode1:数据模型,负责数据存储(后台业务逻辑/数据库)* View:视图层,负责页面展示(HTML)* View Model(Vue):负责业务逻辑处理(比如Ajax请求等)* view 与 Model 数…...
创作者等级权益说明
创作者等级权益说明 一、如何查看创作者等级权益二、等级权益对照表 一、如何查看创作者等级权益 step1:鼠标移动至头像,显示如下图的浮窗 step2:点击我的等级,即跳转到创作者等级权益页面 图1.1 我的等级 图1.2 创作者等级权益…...
基于SpringBoot+Vue+uniapp微信小程序的校园反诈骗微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念,提供了一套默认的配置,让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…...
统一修改UI库样式的几种方式
统一修改element组件库样式的几种方式。主题 | Element Plus 通过css变量设置 【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式:root {--hc-text-color-placeholder: #5f84a2;--hc-text-color-regular: #fff;--hc-text-color-primary: #fff;--hc-bg-c…...
ICM20948 DMP代码详解(88)
接前一篇文章:ICM20948 DMP代码详解(87) 本回继续对inv_convert_androidSensor_to_control函数进行解析。为了便于理解和回顾,再次贴出inv_convert_androidSensor_to_control函数源码,在EMD-Core\sources\Invn\Devices\Drivers\ICM20948\Icm20948DataBaseControl.c中,如下…...
字节跳动实习生投毒自家大模型细节曝光 影响到底有多大?
10月19日,字节跳动大模型训练遭实习生攻击一事引发广泛关注。据多位知情人士透露,字节跳动某技术团队在今年6月遭遇了一起内部技术袭击事件,一名实习生因对团队资源分配不满,使用攻击代码破坏了团队的模型训练任务。 据悉…...
【路径规划】蚁群算法优化bp神经网络回归预测
摘要 本文提出了一种基于蚁群算法(ACO)优化 BP 神经网络的回归预测方法,用于路径规划中的预测问题。通过蚁群算法优化神经网络的初始权值和阈值,提高了神经网络的训练效率和预测精度。实验结果表明,该方法能够有效提升…...
如何在OceanBase中新增系统变量及应用实践
因为系统变量涉及复杂的工程文件,为防止新增变量操作对软件系统的潜在影响,OceanBase为多数开发者设计了一套高效的编程框架。此框架允许开发者在新增及使用系统变量时,仅需专注于变量定义的细节。具体来说,通过运行一个Python脚本…...
Olap数据处理
一、OLAP 是什么 1. OLAP的定义 OLAP(Online Analytical Processing,联机分析处理)是一种软件技术,它主要专注于复杂的分析操作,帮助分析人员、管理人员或执行人员从多角度对信息进行快速、一致、交互地存取…...
Tailwind Starter Kit 一款极简的前端快速启动模板
Tailwind Starter Kit 是基于TailwindCSS实现的一款开源的、使用简单的极简模板扩展。会用Tailwincss就可以快速入手使用。Tailwind Starter Kit 是免费开源的。它不会在原始的TailwindCSS框架中更改或添加任何CSS。它具有多个HTML元素,并附带了ReactJS、Vue和Angul…...
物联网智能家居环境监测系统
作为物联网工程专业的学生,做一个智能家居非常重要,大家是这个专业的同学可以了解一下,不是这个专业的同学也可以了解一下,毕设可以参考哦。 稍微简单的了解(仅对代码可以自己写的同学) 对于一个零基础的物…...
观测云 AI 助手上线:智能运维,从此触手可及!
在当前的云原生时代,运维的复杂性和数据的爆炸式增长给企业带来了前所未有的挑战。为了帮助企业高效应对这些挑战,观测云自豪地推出了 AI 助手——智能化的运维助手,让每位用户都能轻松驾驭复杂的可观测性场景。 01 你身边的 PE 助手&#x…...
案例分析:拒绝服务攻击引发的网络调优之旅
在信息安全领域,拒绝服务攻击(DoS)与分布式拒绝服务攻击(DDoS)已成为企业面临的重要挑战之一。这些类型的攻击不仅能够导致服务中断,还可能对公司的声誉及财务状况产生不利影响。本文旨在通过一个案例来深入…...
Spring Boot Web框架:智慧社区设计新思路
4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式,是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示: 图4-1系统工作原理…...
从 Hadoop 迁移到数据 Lakehouse 的架构师指南
从 Hadoop 到数据湖仓一体架构的演变代表了数据基础架构的重大飞跃。虽然 Hadoop 曾经以其强大的批处理能力统治着大数据领域,但如今的组织正在寻求更敏捷、更具成本效益和现代化的解决方案。尤其是当他们越来越多地开始实施 AI 计划时。根本没有办法让 Hadoop 为 A…...
Python基础——类与对象
类与对象的理解: 在程序中我们将类看作是设计图纸,对象则是根据这个图纸生产的产品。面向对象编程就是使用对象编程,在类中我们定义成员属性和方法。 来看下面这个例子,创建student类,定义对象并对属性赋值。 class S…...
知乎广告怎么做?知乎种树推广怎么收费?
作为国内领先的知识分享平台,知乎以其高质量的内容和精准的用户群体,成为了品牌营销的新蓝海。云衔科技正式推出知乎信息流广告和知广告开户及代运营服务,旨在为企业提供一站式的营销解决方案。 一、知乎广告怎么做? 1.明确广告…...
【设计模式】Python 设计模式之建造者模式(Builder Pattern)详解
Python 设计模式之建造者模式(Builder Pattern)详解 在软件开发中,创建复杂对象往往需要多个步骤,而这些步骤之间的顺序、配置可能有多种变化。为了解决这个问题,建造者模式(Builder Pattern)应…...
微软常用运行库合集 Microsoft Visual C++ Redistributable 2023.11.13
微软常用系统运行库 Microsoft Visual C Redistributable(简称:MSVC,VB/VC,系统运行库)是Windows操作系统应用程序的基础类型库组件。此版微软常用运行库合集整合Visual C 组件安装包运行库所有版本,提供图…...
[机器视觉]basler相机使用SN编号打开相机和采集
背景分析 在项目中是用basler相机采图时,一般用的比较多的遍历相机,然后使用CreateFirstDevice这个函数获取相机,有些时候可能需要同时连接多个相机,这里一般是遍历后,再循环打开相机,根据打开相机的SN号确…...
解锁TranslucentTB:4种高效实现Windows任务栏透明化的方法
解锁TranslucentTB:4种高效实现Windows任务栏透明化的方法 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 任务栏作为Windows…...
GitHub中文界面插件:3步告别英文困扰,让中文开发者效率翻倍
GitHub中文界面插件:3步告别英文困扰,让中文开发者效率翻倍 【免费下载链接】github-chinese GitHub 汉化插件,GitHub 中文化界面。 (GitHub Translation To Chinese) 项目地址: https://gitcode.com/gh_mirrors/gi/github-chinese 你…...
ctfileGet:城通网盘高速直链提取完整指南
ctfileGet:城通网盘高速直链提取完整指南 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet ctfileGet是一款专门用于获取城通网盘一次性直连地址的开源工具,通过智能解析技术帮助用…...
SEO_从零开始,手把手教你制定有效的SEO策略
SEO基础知识:什么是SEO? 在互联网时代,拥有一个高效的SEO策略是任何网站希望获得更多流量和更高知名度的关键。SEO,全称搜索引擎优化(Search Engine Optimization),是通过优化网站的内容和结构…...
对AI提供信息的不理解或不信任常常会导致误解的积累
对AI提供信息的信任若缺乏审慎验证容易导致误解,因为AI本质上是基于统计概率的"模式匹配机器",而非具备事实判断能力的"知识权威",其输出内容可能包含虚构事实、过时信息或逻辑偏差,而用户往往因AI的"自…...
FlutterApp豆瓣电影模块:复杂列表与详情页性能优化全指南
FlutterApp豆瓣电影模块:复杂列表与详情页性能优化全指南 【免费下载链接】flutter_app 🔥🔥🔥本项目包括各种基本控件使用(Text、TextField、Icon、Image、Listview、Gridview、Picker、Stepper、Dialog、Slider、Row…...
面向 LLM 的程序设计 4:API 版本化与演进——在「模型会记忆旧文档」前提下的兼容策略
用三句话先说明白 人会照旧说明书办事,模型也一样。 它见过的文档、缓存里的接口描述、网页上没刷新的说明、向量库里还没更新的片段,都可能比真实系统更旧。于是系统已经升级了,它还在用老地址、老字段名、老例子去调用。 给人改流程&#…...
剧本杀教程生成指南2025,解析,轻松掌握创作技巧
剧本杀教程生成指南2025,解析,轻松掌握创作技巧剧本杀作为一种新兴的娱乐方式,近年来在全球范围内迅速流行。随着越来越多的人加入到剧本杀的创作和体验中,如何高效地创作出高质量的剧本成为了一个热门话题。本文将为你提供一份详…...
2026年花洒产品推荐:四款热门花洒横评,闭眼入不踩雷
其实选花洒不用盲目追大牌,核心看体验、看品质、看适配性。今天就带来四款热门花洒的深度横评,涵盖瑞尔特、飞利浦、小米米家、九牧四大主流品牌,每款都结合真实使用体验拆解,不罗列参数、不夸大宣传,让每天的沐浴都能…...
OpenClaw+千问3.5-9B数据清洗:Excel复杂表格自动化处理
OpenClaw千问3.5-9B数据清洗:Excel复杂表格自动化处理 1. 为什么需要自动化Excel处理 每次面对上百行的Excel表格时,我总会在合并单元格和异常值上浪费大量时间。作为数据分析师,最痛苦的莫过于收到业务部门发来的"美化版"报表—…...
