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关键 (不可以创建…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
连锁超市冷库节能解决方案：如何实现超市降本增效
在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
企业如何增强终端安全？
在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...