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="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…...
【前端｜Javascript第1篇】一文搞懂Javascript的基本语法
欢迎来到JavaScript的奇妙世界！作为前端开发的基石，JavaScript为网页增色不少，赋予了静态页面活力与交互性。如果你是一名前端小白，对编程一无所知，或者只是听说过JavaScript却从未涉足过，那么你来对了地方…...
【Linux命令200例】cp用于复制文件和目录（常用）
🏆作者简介，黑夜开发者，全栈领域新星创作者✌，阿里云社区专家博主，2023年6月csdn上海赛道top4。 🏆本文已收录于专栏：Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…...
C高级_第二讲_shell指令和shell脚本_递归练习
思维导图 递归实现，输入一个数，输出这个数的每一位 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…...
静态路由综合实验
实验拓扑如下： 实验要求如下： 【1】R6为isp，接口IP地址均为公有地址;该设备只能配置IP地址，之后不能再对其进行任何配置 【2】R1~R5为局域网，私有IP地址192.168.1.0/24，请合理分配 【3】所有路由器上环回…...
Spring核心IOC控制反转思想-----Spring框架
import org.junit.Test;public class TestPublic {Testpublic void Test(){//控制反转是一种思想,是为了提高程序扩展力降低耦合度,达到DIP(Dependency Inversion Principle依赖倒置)原则//其核心是将对象的创建权交出去,由第三方容器负责管理,将对象和对象之间的维护权交出去,…...
中小企业如何做好MES管理系统实施建设
中小企业在生产制造领域面临着诸多挑战，包括提升产品竞争力、规范生产制造等。为了应对这些挑战，越来越多的中小企业开始实施MES生产管理系统。然而，由于企业规模小、资源实力不足等原因，很多企业在实施MES管理系统时存在一定的困…...
java环境搭建 Ubuntu Linux
jdk的安装和配置环境变量 使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功 使用官网下载的jdk包 直接在百度上搜索jdk，选择图片这个 网址:jdk下载网址 若是arm就选择带有arm的，反之选择x64的&#…...
微信小程序使用mp-html遇到的问题并解决
1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具-->构建npm 然后就报错了 于是搜索到以下的内容： 没有找到可以构建的NPM包，请确认需要参与构建的npm都在 miniprogramRoot 目录内 -…...
【VTK】基于读取出来的 STL 模型，当用户点击鼠标左键时，程序将获取点击位置的点，显示其坐标，并设置它为模型的旋转原点
知识不是单独的，一定是成体系的。更多我的个人总结和相关经验可查阅这个专栏：Visual Studio。 文章目录 class PointPickedSignal : public QObjectclass MouseInteractorCommand : public vtkCommandvoid A::on_pushButtonSelected_clicked()void A::on…...
【第一阶段】kotlin的when表达式
1.Java 的if /when是语句 kotlin的if/when是表达式，表达式是有返回值的 java中void是个关键字，Unit在kotlin中是个类 2.当使用when语句的时候必须有一个不满足的值即else: fun main() {var week:Int5val info when(week){1->"今天是星期一"…...
 和 int.Parse()的区别)
C#中Convert.ToInt32() 和 int.Parse()的区别
都是用于将字符串转换为整数类型（int）的方法，但它们在处理转换过程中有一些区别： 1. 错误处理方式不同： - Convert.ToInt32()：如果字符串无法成功转换为整数类型，Convert.ToInt32()…...
安全学习DAY14_JS信息打点
信息打点——前端JS框架 文章目录 信息打点——前端JS框架小节概述-思维导图JS安全概述什么是JS渗透测试？前后端差异JS安全问题流行的Js框架如何判定JS开发应用？ 测试方法（JS文件的获取以及分析方法1、手工搜索分析2、半自动Burp分析插件介绍…...
windows下配置vue开发环境
安装nodejs，配置npm 1.下载安装包：下载地址：https://nodejs.org/en/download 2.安装node：下载完成后进行安装，记住安装的文件夹。本人安装路径为 D:\Program Files\nodejs 3.配置环境变量： ①安装完成后…...
AndroidTV 获取焦点View放大效果实现方式
需求 电视开发最常见的就是view获焦后要有放大效果，让用户明显看到。这里总结两个实现方法，以后遇到其他的再补充。 方式一：ViewCompat.animate(view) 1、注册焦点变化监听 mBtnFocus1.setOnFocusChangeListener(this);2、有焦点变化的时…...
访问者模式——操作复杂对象结构
1、简介 1.1、概述 访问者模式是一种较为复杂的行为型设计模式，它包含访问者和被访问元素两个主要组成部分。这些被访问的元素通常具有不同的类型，且不同的访问者可以对它们进行不同的访问操作。访问者模式使得用户可以在不修改现有系统的情况下扩展系…...
指针经典笔试题强训（附图详解）
目录 笔试题1： 解析： 运行结果： 笔试题2 解析： 运行结果： 笔试题3 解析： 运行结果： 笔试题4 解析： 运行结果： 笔试题5 解析： 运行结果：…...
Python：列表(list)与元组(tuple)
列表与元组 列表：list元组：tuple 比较直观的区分：列表是中括号"[ ]“，元组是小括号”( )"元组可以看成列表的只读形式 # 列表 list1 [hello, world] list2 [1, 2, 3, 4, 5] list3 ["a", "b", &…...
常见的相似性度量方法
有如下几种计算相似性方法： 点积相似度 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∑nxi∗yi 向量内积的结果是没…...
Day06-JS高级编程
Day01-JS高级编程 一 变量和常量 1 概念 在程序中,变量是值可以改变的量,常量是值不可以改变的量 在ES6以前变量的创建使用var关键字 (可以创建多个同名变量) 从ES6开始变量的创建推荐使用let关键字 (不可以创建多个同名变量) 从ES6开始常量的创建使用const关键 (不可以创建…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码：HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...
归并排序：分治思想的高效排序
目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法，由约翰冯诺伊曼在1945年提出。其核心思想包括： 分割(Divide)：将待排序数组递归地分成两个子…...