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关键 (不可以创建…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
龙虎榜——20250610
上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的：御银股份、雄帝科技 驱动…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
32单片机——基本定时器
STM32F103有众多的定时器，其中包括2个基本定时器（TIM6和TIM7）、4个通用定时器（TIM2~TIM5）、2个高级控制定时器（TIM1和TIM8），这些定时器彼此完全独立，不共享任何资源 1、定…...