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关键 (不可以创建…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
什么是EULA和DPA
文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
安卓基础（Java 和 Gradle 版本）
1. 设置项目的 JDK 版本 方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...
Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生，系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler，它是Thread的子类（就是package java.lang;里线程的Thread）。本文将利用它将设备信息、报错信息以及错误的发生时间都…...
LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》
🧠 LangChain 中 TextSplitter 的使用详解：从基础到进阶（附代码） 一、前言 在处理大规模文本数据时，特别是在构建知识库或进行大模型训练与推理时，文本切分（Text Splitting） 是一个…...