当前位置： 首页 > news >正文

Vue [Day2]

news 2025/6/26 16:21:34

指令修饰符

在这里插入图片描述

v-model.trim

v-model.number

@事件名.stop @click.stop

@事件名.prevent

@keyup.enter

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="../vue.js"></script><style>#app {margin: 50px 50px;}* {box-sizing: border-box;margin: 0;padding: 0;list-style: none;}.head {width: 243px;/* background-color: #584949; */}input {height: 30px;vertical-align: middle;}.head button {height: 30px;}.body li {width: 234px;height: 50px;display: flex;line-height: 50px;/* justify-content: space-between; */background-color: #de8282;border-bottom: black solid 2px;}.body li .content {flex: 1;}.body li button {height: 50%;align-self: center;display: none;}.body li:hover button {display: block;width: 20px;}.footer {width: 234px;display: flex;justify-content: space-between;}
</style><body><!-- 需求：6.优化：除了点击按钮添加事项，在输入框回车，也可以完成添加--><div id="app"><h1>小黑记事本</h1><div class="head"><!-- 按键（回车）按下，出发add事件，和button的事件一样 --><input @keyup.enter="add" v-model="todoName" type="text" placeholder="请输入待办事项"><button @click="add">添加任务</button></div><section class="body"><ul><li v-for="(item,index) in todoList" :key="item.id"><span>{{index+1}}</span><span class="content">{{item.name}}</span><button @click="del(item.id)">×</button></li></ul></section><div v-show="todoList.length>0" class="footer"><span>合计：<strong>{{todoList.length}}</strong></span><button @click="clear()">清空任务</button></div></div>
</body>
<script>const app = new Vue({el: '#app',data: {todoName: '',todoList: [{ id: 1, name: '吃水果' },{ id: 2, name: '喝酸奶' }]},methods: {del(tt) {this.todoList = this.todoList.filter(item => item.id != tt)},add() {if (this.todoName.trim() == '') {alert('请输入内容')return}this.todoList.unshift({id: +new Date(),name: this.todoName})this.todoName = ''},clear() {this.todoList = []}}})
</script></html>

v-bind基础 （回顾Day1

在这里插入图片描述

v-bind进阶

v-bind对于样式控制的增强 —— 操作class

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="../vue.js"></script>
<style>.box {width: 100px;height: 100px;border: 2px solid black;}.pink {background-color: pink;}.big {width: 300px;height: 300px;}
</style><body><div id="app"><div class="box" :class="{pink:true,big:true}">Hello</div><div class="box" :class="['pink','big']">Hello</div></div>
</body>
<script>const app = new Vue({el: '#app',data: {},method: {}})
</script></html>

[案例]——京东秒杀

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="../vue.js"></script>
<link rel="stylesheet" href="../base.css">
<style>ul {display: flex;border-bottom: rgb(245, 12, 12) 2px solid;}li a {display: block;width: 70px;height: 30px;line-height: 30px;text-align: center;}.mouseover_active {background-color: rgba(247, 101, 101, 0.874);}.active {background-color: red;}
</style><body><div id="app"><ul><!--                                              @mouseover --><li v-for="(item , index) in list" :key="item.id" @mouseover="activeIndex2=index"@click="activeIndex1=index"><a :class="{mouseover_active:index==activeIndex2,active:index==activeIndex1 }"href="#">{{item.name}}</a></li></ul></div>
</body>
<script>const app = new Vue({el: '#app',data: {activeIndex2: 0,activeIndex1: 0,list: [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' },]},method: {}})
</script></html>

v-bind 对于样式控制的增强——style操作

在这里插入图片描述

[案例]—— 进度条

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="../vue.js"></script>
<link rel="stylesheet" href="../base.css">
<style>#app {margin: 10px;}.progress {width: 300px;height: 40px;margin-bottom: 40px;background-color: #cdf92c;border-radius: 25px;padding: 5px;}.inner {background-color: #0df6c7;border-radius: 25px;height: 30px;/* width: 20%; */}.low {background-color: #92ee61;}.high {background-color: rgb(141, 179, 216);}.over {background-color: rgb(0, 128, 255);}.inner span {width: 100%;text-align: right;display: block;line-height: 90px;}
</style><body><div id="app"><div class="progress"><!-- 在这里面num  不用加{{}}    并且{}里面 是js对象  ，所以要遵守驼峰命名法 也就是 background-color 要变成 backgroundColor--><div class="inner" :class="{low:num<50,high:num>70,over:num==100}" :style="{width:num+'%'}"><span>{{num}}%</span></div></div><button @click="num=25">设置25%</button><button @click="num=50">设置50%</button><button @click="num=75">设置75%</button><button @click="num=100">设置100%</button></div>
</body>
<script>const app = new Vue({el: '#app',data: {num: 10},method: {}})
</script></html>

相关文章：

Vue [Day2]

指令修饰符 v-model.trim v-model.number 事件名.stop click.stop 事件名.prevent keyup.enter <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...

编程日记 2023/8/4 3:04:09

【前端｜Javascript第1篇】一文搞懂Javascript的基本语法

欢迎来到JavaScript的奇妙世界&#xff01;作为前端开发的基石&#xff0c;JavaScript为网页增色不少&#xff0c;赋予了静态页面活力与交互性。如果你是一名前端小白&#xff0c;对编程一无所知&#xff0c;或者只是听说过JavaScript却从未涉足过&#xff0c;那么你来对了地方…...

编程日记 2023/8/4 3:03:07

【Linux命令200例】cp用于复制文件和目录（常用）

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜…...

编程日记 2023/8/4 3:02:05

C高级_第二讲_shell指令和shell脚本_递归练习

思维导图 递归实现&#xff0c;输入一个数&#xff0c;输出这个数的每一位 int funh(int num){if(0 num){return 0;}else{funh(num/10);printf("%d\n", num%10);} }int main(int argc, const char *argv[]) {puts("请输入一个数");int num 0;scanf(&quo…...

编程日记 2023/8/4 3:01:04

静态路由综合实验

实验拓扑如下&#xff1a; 实验要求如下&#xff1a; 【1】R6为isp&#xff0c;接口IP地址均为公有地址;该设备只能配置IP地址&#xff0c;之后不能再对其进行任何配置 【2】R1~R5为局域网&#xff0c;私有IP地址192.168.1.0/24&#xff0c;请合理分配 【3】所有路由器上环回…...

编程日记 2023/8/4 3:00:03

Spring核心IOC控制反转思想-----Spring框架

import org.junit.Test;public class TestPublic {Testpublic void Test(){//控制反转是一种思想,是为了提高程序扩展力降低耦合度,达到DIP(Dependency Inversion Principle依赖倒置)原则//其核心是将对象的创建权交出去,由第三方容器负责管理,将对象和对象之间的维护权交出去,…...

编程日记 2023/8/4 2:58:00

中小企业如何做好MES管理系统实施建设

中小企业在生产制造领域面临着诸多挑战&#xff0c;包括提升产品竞争力、规范生产制造等。为了应对这些挑战&#xff0c;越来越多的中小企业开始实施MES生产管理系统。然而&#xff0c;由于企业规模小、资源实力不足等原因&#xff0c;很多企业在实施MES管理系统时存在一定的困…...

编程日记 2023/8/4 2:56:58

java环境搭建 Ubuntu Linux

jdk的安装和配置环境变量 使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功 使用官网下载的jdk包 直接在百度上搜索jdk&#xff0c;选择图片这个 网址:jdk下载网址 若是arm就选择带有arm的&#xff0c;反之选择x64的&#…...

编程日记 2023/8/4 2:55:57

微信小程序使用mp-html遇到的问题并解决

1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具-->构建npm 然后就报错了 于是搜索到以下的内容&#xff1a; 没有找到可以构建的NPM包&#xff0c;请确认需要参与构建的npm都在 miniprogramRoot 目录内 -…...

编程日记 2023/8/4 2:54:56

【VTK】基于读取出来的 STL 模型，当用户点击鼠标左键时，程序将获取点击位置的点，显示其坐标，并设置它为模型的旋转原点

知识不是单独的&#xff0c;一定是成体系的。更多我的个人总结和相关经验可查阅这个专栏&#xff1a;Visual Studio。 文章目录 class PointPickedSignal : public QObjectclass MouseInteractorCommand : public vtkCommandvoid A::on_pushButtonSelected_clicked()void A::on…...

编程日记 2023/8/4 2:53:55

【第一阶段】kotlin的when表达式

1.Java 的if /when是语句 kotlin的if/when是表达式&#xff0c;表达式是有返回值的 java中void是个关键字&#xff0c;Unit在kotlin中是个类 2.当使用when语句的时候必须有一个不满足的值即else: fun main() {var week:Int5val info when(week){1->"今天是星期一"…...

编程日记 2023/8/4 2:52:52

C#中Convert.ToInt32() 和 int.Parse()的区别

都是用于将字符串转换为整数类型&#xff08;int&#xff09;的方法&#xff0c;但它们在处理转换过程中有一些区别&#xff1a; 1. 错误处理方式不同&#xff1a; - Convert.ToInt32()&#xff1a;如果字符串无法成功转换为整数类型&#xff0c;Convert.ToInt32()…...

编程日记 2023/8/4 2:51:50

安全学习DAY14_JS信息打点

信息打点——前端JS框架 文章目录 信息打点——前端JS框架小节概述-思维导图JS安全概述什么是JS渗透测试&#xff1f;前后端差异JS安全问题流行的Js框架如何判定JS开发应用&#xff1f; 测试方法&#xff08;JS文件的获取以及分析方法1、手工搜索分析2、半自动Burp分析插件介绍…...

编程日记 2023/8/4 2:50:49

windows下配置vue开发环境

安装nodejs&#xff0c;配置npm 1.下载安装包&#xff1a;下载地址&#xff1a;https://nodejs.org/en/download 2.安装node&#xff1a;下载完成后进行安装&#xff0c;记住安装的文件夹。本人安装路径为 D:\Program Files\nodejs 3.配置环境变量&#xff1a; ①安装完成后…...

编程日记 2023/8/4 2:49:47

AndroidTV 获取焦点View放大效果实现方式

需求 电视开发最常见的就是view获焦后要有放大效果&#xff0c;让用户明显看到。这里总结两个实现方法&#xff0c;以后遇到其他的再补充。 方式一&#xff1a;ViewCompat.animate(view) 1、注册焦点变化监听 mBtnFocus1.setOnFocusChangeListener(this);2、有焦点变化的时…...

编程日记 2023/8/4 2:48:45

访问者模式——操作复杂对象结构

1、简介 1.1、概述 访问者模式是一种较为复杂的行为型设计模式&#xff0c;它包含访问者和被访问元素两个主要组成部分。这些被访问的元素通常具有不同的类型&#xff0c;且不同的访问者可以对它们进行不同的访问操作。访问者模式使得用户可以在不修改现有系统的情况下扩展系…...

编程日记 2023/8/4 2:47:44

指针经典笔试题强训（附图详解）

目录 笔试题1&#xff1a; 解析&#xff1a; 运行结果&#xff1a; 笔试题2 解析&#xff1a; 运行结果&#xff1a; 笔试题3 解析&#xff1a; 运行结果&#xff1a; 笔试题4 解析&#xff1a; 运行结果&#xff1a; 笔试题5 解析&#xff1a; 运行结果&#xff1a;…...

编程日记 2023/8/4 2:46:41

Python：列表(list)与元组(tuple)

列表与元组 列表&#xff1a;list元组&#xff1a;tuple 比较直观的区分&#xff1a;列表是中括号"[ ]“&#xff0c;元组是小括号”( )"元组可以看成列表的只读形式 # 列表 list1 [hello, world] list2 [1, 2, 3, 4, 5] list3 ["a", "b", &…...

编程日记 2023/8/4 2:45:39

常见的相似性度量方法

有如下几种计算相似性方法&#xff1a; 点积相似度 X ⋅ Y ∣ X ∣ ∣ Y ∣ c o s θ ∑ i 1 n x i ∗ y i \begin{aligned} X \cdot Y & |X||Y|cos\theta \\ & \sum_{i1}^n x_i * y_i \end{aligned} X⋅Y​∣X∣∣Y∣cosθi1∑n​xi​∗yi​​ 向量内积的结果是没…...

编程日记 2023/8/4 2:44:38

Day06-JS高级编程

Day01-JS高级编程 一 变量和常量 1 概念 在程序中,变量是值可以改变的量,常量是值不可以改变的量 在ES6以前变量的创建使用var关键字 (可以创建多个同名变量) 从ES6开始变量的创建推荐使用let关键字 (不可以创建多个同名变量) 从ES6开始常量的创建使用const关键 (不可以创建…...

编程日记 2023/8/4 2:43:37

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/6/18 8:29:05

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/6/17 21:15:23

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/6/24 0:31:15

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/6/20 11:09:49

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/6/21 17:17:46

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/6/21 15:17:11

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2025/6/22 13:18:54

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2025/6/21 9:57:32

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/6/21 22:56:58

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01