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

一.Vue中的条件渲染

article 2026/4/8 2:51:35

1.在<head>中引用

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2.在<body>中写入

<div id="app"><p><a v-if ="user.username=='admin'"href="#">编辑</a><a v-if="user.username!='guest'" href="#">详情</a></p><p><a v-if ="user.username=='admin'"href="#">编辑</a><a v-else href="#">详情</a></p><p><a v-show ="user.username=='admin'"href="#">编辑</a><a v-show="user.username!='admin'" href="#">详情</a></p><p><button type="button" @click="change">切换成Guest</button></p></div>

3.在script中写入

<script>const {createApp} = VuecreateApp({data(){return {user:{username:'admin'}}},methods:{change:function(event){if(this.user.username == 'admin'){this.user.username = 'guest'event.target.innerHTML = '切换成Admin'}else{this.user.username = 'admin'event.target.innerHTML = '切换成Guest'}}}        }).mount('#app')</script>

`(1)v-if`

用途：根据表达式的真假值来条件性地渲染一个元素。
行为：如果表达式的值为真，则渲染元素及其内容；如果为假，则不渲染。v-if 有“惰性”渲染的特性，即在条件首次评估为假时，元素及其绑定的数据都不会被创建或渲染；当条件变为真时，才会开始渲染。
适用场景：适用于条件渲染，且条件在初始渲染时不太可能改变的情况，或者条件改变时涉及大量 DOM 操作的情况。

`(2)v-show`

用途：根据表达式的真假值来显示或隐藏一个元素。

行为：无论表达式的值是真还是假，元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS display 属性。
适用场景：适用于需要频繁切换显示/隐藏状态，且切换代价较小的情况，因为元素始终保留在 DOM 中，只是简单地切换可见性。

(3)`v-for`

用途：基于源数据多次渲染元素或模板块。
行为：v-for 指令需要以特殊语法 item in items 的形式来使用，其中 items 是源数据数组或对象，item 是被迭代的数组元素或对象的值。v-for 还支持一个可选的第二个参数，即当前项的索引或键名。
适用场景：适用于需要渲染列表或集合的情况，如用户列表、商品列表等

二.列表渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表渲染</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><ul><li v-for="(u,index) in users">{{index}}_{{u.id}}_{{u.name}}_{{u.age}}</li></ul></div><script>const {createApp} = VuecreateApp({data(){return {users:[{id:1,name:'zhangsan',age:18},{id:2,name:'lisi',age:19},{id:3,name:'wangwu',age:20},]}},methods:{}        }).mount('#app')</script>
</body>
</html>

三.ref属性-此写法只适合Vue2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ref属性-此写法只适合Vue2</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><p><input type="text" value="admin" ref="username"><input type="button" value="获取用户名称" @click="getUsername"></p></div><script>const {createApp} = VuecreateApp({data(){return {}},methods:{getUsername(){alert(this.$refs.username.value)}}        }).mount('#app')</script>
</body>
</html>

ref和refs的区别:

ref
- “ref”用于给元素或子组件注册引用信息。
- 当“ref”应用于普通DOM元素时，引用指向的是该DOM元素；而当应用于子组件时，引用则指向组件实例。
- 通过“ref”，开发者可以在父组件中方便地访问和操作这些被标记的元素或组件。
refs
- 在Vue.js等框架中，“$refs”是一个对象，用于存储所有通过“ref”属性注册的引用信息。
- 可以通过“refs”轻松访问和操作这些被标记的元素或组件。例如，“this.refs.myElement”可以访问名为“myElement”的DOM元素或子组件实例。

代码效果:

四.计算属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算属性</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app">姓:<input type="text" v-model="firstName1">名:<input type="text" v-model="lastName1">姓名:<input type="text" v-model="username1"><br><br>姓:<input type="text" v-model="firstName2">名:<input type="text" v-model="lastName2">姓名:<input type="text" v-model="username2"></div><script>const {createApp} = VuecreateApp({data(){return {firstName1:'',lastName1:'',    firstName2:'',lastName2:''              }        },methods:{},computed:{//在computed属性对象中定义计算属性的方法,用于对数据进行计算操作//通过getter和setter实现对属性数据的显示进行监控username1:function(){return this.firstName1+'' + this.lastName1},username2:{get:function(){return this.firstName2+''+ this.lastName2},set:function(val){let strs=val.split(' ')this.firstName2=strs[0]this.lastName2=strs[1]}}        }    }).mount('#app')</script>
</body>
</html>

代码效果:

五.监听属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>监听属性</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app">姓:<input type="text" v-model="firstName">名:<input type="text" v-model="lastName">姓名:<input type="text" v-model="username"></div><script>const {createApp} = VuecreateApp({data(){return {firstName:'',lastName:'',username:''           }        },watch:{//通过Vue对象的$watch方法监听属性或watched的配置来监听指定属性//当属性变化时,回调函数自动调用,在函数内部进行计算username:function(newVal,oldVal){if(newVal!=''){let strs=newVal.split(' ')this.firstName=strs[0]this.lastName=strs[1]}else{this.firstName=''this.lastName=''}},firstName:function(){this.username=this.firstName+' '+this.lastName},lastName:function(){this.username=this.firstName+' '+this.lastName}}}).mount("#app")</script>
</body>
</html>

六.更新购买数量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>更新购买数量</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button type="button" @click="sub">-</button><input type="text" v-model="number" style="width: 50px; text-align: center;"><button type="button" @click="add">+</button></div><script>const {createApp} = VuecreateApp({data(){return {number:1      }        },methods:{add(){if(this.number<10){this.number++} },sub(){ if(this.number>1){this.number--}}}}).mount('#app')</script>
</body>
</html>

七.图片的切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片切换</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style>#box{width: 960px;height: 540px;margin:50px auto;border-top:10px solid #ccc;border-left:10px solid #ccc;border-right:10px solid #666;border-bottom:10px solid #666;padding:5px;}.btnLeft{width:100px;font-size:40px;color:#000;position: relative;top:-310px;left:0px;opacity:0.2;display:inline-block;cursor: pointer;}.btnRight{width:100px;font-size:40px;color:#000;position: relative;top:-310px;right:-820px;opacity:0.2;display:inline-block;cursor: pointer;}img{width:960px;height:540px;}</style>
</head>
<body><div id="app"><div id="box"><img :src="images[currentIndex]"><div class="btnLeft" @click="left">《</div><div class="btnRight" @click="right">》</div></div></div><script>const {createApp} = VuecreateApp({data(){return {images:['images/1.jpg','images/2.jpg','images/3.jpg',],currentIndex:0  }        },methods:{left(){if(this.currentIndex>0){this.currentIndex--;}},right(){if(this.currentIndex<this.images.length-1){this.currentIndex++;}}}}).mount('#app')</script>
</body>
</html>

八.全选/全部选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全选/全不选</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><p><input type="checkbox" v-model="checkedAll" @click="choose">全选/全不选</p><p><span v-for="item in hobbys"><input type="checkbox" v-model="ids" :value="item.id">{{item.title}}</span></p></div><script>const {createApp} = VuecreateApp({data(){return {hobbys:[{id:1,title:'运动'},{id:2,title:'音乐'},{id:3,title:'美术'},{id:4,title:'学习'},],ids:[],//爱好是否勾选checkedAll:false //是否全选,默认false}        },methods:{choose(){if(this.checkedAll==true){this.ids=[]}else{this.hobbys.forEach(item=>{this.ids.push(item.id)})}}                },watch:{ids:function(){if(this.ids.length==this.hobbys.length){this.checkedAll=true}else{this.checkedAll=false}}}}).mount('#app')</script>
</body>
</html>

九.Vue综合案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* { margin: 0px; padding: 0px }h1 { text-align: center; width: 600px; margin: 100px auto 10px auto; }#box { width: 600px; margin: 0px auto; border: solid #ccc 1px; }#box input { width: 530px; border: 0px; padding: 10px 5px; font-size: 20px }#box ul { border-top: solid 1px #ccc;list-style: none;padding: 10px 5px; }#box ul li { font-size: 18px;line-height: 35px; }.left { float: left;color: #999;cursor: pointer }.right { float: right;color: #999;cursor: pointer }.clearfix:after, .clearfix:before { content: ""; display: table; clear: both; }.remove { color: #999;float: right;cursor: pointer;font-size: 20px; }#btn { width: 60px;height: 44px;border: 0px;cursor: pointer; }</style><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><h1>我的记事本</h1><div id="box"><div><input type="text" v-model="record" placeholder="请填写您的记事信息"><button id="btn" type="button" @click="save">添加</button></div><ul class="clearfix"><li v-for="(item,index) in records" style="border-bottom: dotted 1px #ccc"><span @click="modify(index)" style="cursor: pointer">{{index+1}}.{{item.content}}</span><span @click="remove(index)" class="remove" >&nbsp;x&nbsp;</span></li><li><span class="left">Total {{records.length}} Records</span><span class="right" @click="removeAll()">Remove All</span></li></ul></div></div><script>const {createApp} = VuecreateApp({data: function () {return {records:[//记录记事本列表{id:1,content:'今日记事,晚上跑步!'},{id:1,content:'今日记事,晚上复习2小时!'},],record:'',//记录事项currentId:3,//当前事项最大idmotifyId:0//修改事项Id}},methods:{save(){//添加事项if(this.record===''){alert("请填写要记事的内容")}else{if(this.motifyId===0){//如果修改id等于0则表示添加新的记事内容this.records.push({id:this.currentId,content:this.record})this.currentId++}else{//修改事项//循环获得记事本中每一个事项,寻找到要修改的事项并覆盖内容for(let i=0;i<this.records.length;i++){if(this.records[i].id===this.motifyId){this.records[i].content=this.record}}}this.record=''//清空输入框内容}},modify(index){let record=this.records[index]this.record=record.contentthis.motifyid=record.id},remove(index){this.records.splice(index,1)//splice函数用于删除数组中的元素，参数1要删除元素的下标数，参数2删除几条数据},removeAll(){this.records=[]//清空记录列表this.modifyId=0//清空修改idthis.currentId=3//清空当前id}}}).mount('#app')</script>
</body>
</html>

一.Vue中的条件渲染

1.在<head>中引用 <script src"https://unpkg.com/vue3/dist/vue.global.js"></script> 2.在<body>中写入 <div id"app"><p><a v-if "user.usernameadmin"href"#">编辑</a><a …...

编程日记 2026/4/6 17:17:53

IO进程 day05

IO进程 day05 9. 进程9. 9. 守护进程守护进程的特点守护进程创建步骤 10. 线程10.1. 线程的概念10.2. 进程和线程的区别10.2. 线程资源10.3. 线程的函数接口1. pthread_create-创建线程线程函数和普通函数的区别 2. pthread_exit3.线程资源回收函数join和detach的区别获取线程…...

编程日记 2026/4/5 19:27:58

【HeadFirst系列之HeadFirstJava】第6天之认识Java的API：解锁高效开发的钥匙

认识Java的API：解锁高效开发的钥匙在《Head First Java》的第六章节中，作者深入探讨了Java的API（Application Programming Interface），并强调了它在Java开发中的重要性。Java API 是Java开发工具包（JDK&a…...

编程日记 2026/4/7 8:43:41

4 - AXI GPIO按键控制LED实验

文章目录 1 实验任务2 系统框图3 软件设计 1 实验任务本实验任务是通过调用PL端AXI GPIO IP核，使用中断机制，实现PL端按键控制 PS端LED的功能。 2 系统框图 3 软件设计注意事项： AXI GPIO IP核是双沿触发中断，不可设置&…...

编程日记 2026/4/5 22:15:29

题海拾贝：扫雷

Hello大家好！很高兴我们又见面啦！给生活添点passion，开始今天的编程之路！ 我的博客：<但凡. 我的专栏：《编程之路》、《数据结构与算法之美》、《题海拾贝》欢迎点赞，关注！ 1、题…...

编程日记 2026/4/6 5:47:22

Deepseek本地部署小实践（c盘）

目录前言一、安装ollama 二、打开终端执行run 三、可视化前言小鲸鱼出来以后看到很多大佬本地部署AI，自己也想试一试，第一次部署AI，选了一个简单的办法，实践一下，写得比较粗糙。一、安装ollama 先简单的介绍…...

编程日记 2026/4/6 13:50:10

详细解析d3dx9_27.dll丢失怎么办？如何快速修复d3dx9_27.dll

运行程序时提示“d3dx9_27.dll文件缺失”，通常由DirectX组件损坏或文件丢失引起。此问题可通过系统化修复方法解决，无需重装系统或软件。下文将详细说明具体步骤及注意事项。一.d3dx9_27.dll缺失问题的本质解析当系统提示“d3dx9_27.dll丢失”时&…...

编程日记 2026/4/6 4:08:45

【LeetCode刷题之路】leetcode155.最小栈

LeetCode刷题记录 🌐 我的博客主页：iiiiiankor🎯 如果你觉得我的内容对你有帮助，不妨点个赞👍、留个评论✍，或者收藏⭐，让我们一起进步！📝 专栏系列：LeetCode…...

编程日记 2026/4/6 16:43:35

矩阵乘积态简介

定义矩阵乘积态（Matrix Product State, MPS）是一种用于表示量子多体系统的强大工具，特别是在一维系统中。MPS 是一种张量网络状态，它通过将全局量子态分解为一系列局部张量的乘积来有效地表示量子态。注释： 量子态表…...

编程日记 2026/3/2 3:03:08

Oracle数据库分区自动删除

说明： 该存储过程部署后，设置成定时任务，每天执行。每次执行删除partition_position 2的分区，删除之后，partition_position 3的分区会前移到partition_position 为 2; CREATE OR REPLACE PROCEDURE BILL_CENT_JI…...

编程日记 2026/3/4 23:33:42

华三交换机S5560 NQA测试

文章目录 NQA配置介绍实验说明 NQA配置介绍 NQA配置 nqa entry admin testtype icmp-echo //配置NQA类型destination ip 10.1.0.1 //配置探测的目的IPsource ip 10.1.0.2 //配置探测的源IPfrequency 6000 //配置探测的时间history-record enable //历史探测记录…...

编程日记 2026/4/2 18:43:45

Vue全局变量的定义和使用，创建 Store变量、读取、修改

在VUE中，当需要各js、各页面都能读写的全局变量时，可以用store变量，从定义到使用的方法如下一．定义变量，例：我们定一个全局变量gxh 找到 vue的/ src/ store路径, 在 modules文件夹下创建文件gvar.js 在…...

编程日记 2026/4/6 16:00:45

基于Docker的前端环境管理：从开发环境到生产部署的实现方案

# 基于Docker的前端环境管理：从开发环境到生产部署的实现方案简介及前端开发环境挑战简介是一种容器化平台，可以将应用程序及其依赖项打包为一个容器，提供一种轻量级、可移植的环境。它能够简化开发、部署和运维的流程，提高…...

编程日记 2026/4/5 21:33:28

单片机延时函数怎么写规范？

我们以前在开发产品的时候，肯定会碰到一些延时需求，比如常见的LED闪烁，按键消抖，控制IO口输出时序等等。别小看延时，这个小问题，想做好，甚至要考虑到程序架构层面。在开发板上，可能…...

编程日记 2026/4/5 11:32:06

数据结构 1-2 线性表的链式存储-链表

1 原理顺序表的缺点： 插入和删除移动大量元素数组的大小不好控制占用一大段连续的存储空间，造成很多碎片链表规避了上述顺序表缺点逻辑上相邻的两个元素在物理位置上不相邻头结点 L：头指针头指针：链表中第一个结点的存储…...

编程日记 2026/4/7 13:37:56

vue2版本elementUI的table分页实现多选逻辑

1. 需求我们需要在表格页上实现多选要求，该表格支持分页逻辑。 2. 认识属性表格属性参数说明类型可选值默认值data显示的数据array——row-key行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时&…...

编程日记 2026/4/6 13:46:05

比特信噪比与信噪比SNR的换算公式

在无线通信系统中，比特信噪比与信噪比（SNR，通常指符号信噪比Es/N0）的换算： 核心公式 E b N 0 SNR R ⋅ log ⁡ 2 M \boxed{ \frac{E_b}{N_0} \frac{\text{SNR}}{R \cdot \log_2 M} } N0EbR⋅log2MSNR 或…...

编程日记 2026/3/26 18:50:16

设计模式-解释器模式、装饰器模式

解释器模式定义给分析对象定义一个语言，并定义语言的文法表示，再设计一个解释器来解释语言中的句子。也就是说，用编译语言的方式来分析应用中的实例。这种模式实现了文法表达式处理的接口，该接口解释一个特定的上下文。类图 …...

编程日记 2026/4/6 20:03:44

C++初阶——简单实现list

目录 1、前言 2、List.h 3、Test.cpp 1、前言 1. 简单实现std::list，重点：迭代器，类模板，运算符重载。 2. 并不是，所有的类，都需要深拷贝，像迭代器类模板，只是用别的类的资源&am…...

编程日记 2026/4/1 4:03:09

linux 命令+相关配置记录（持续更新...）

linux 命令记录相关配置记录磁盘切换 cd D：#这里表示切换到D盘查看wsl 安装的linux 子系统 wsl --list -vwsl 卸载 linux 子系统 wsl --unregister -xxx # xxx 表示子系统的名字备份Linux 子系统导出 wsl --export xxx yyy # xxx 表示子系统的名字 yyy 表示压…...

编程日记 2026/4/4 15:02:37

【PDF预览】使用iframe实现pdf文件预览，加盖章

使用iframe实现pdf文件预览，以及在pdf上添加水印。另外还包括批注、打印、下载、缩放、分页等功能 <iframesrc"http://static.shanhuxueyuan.com/test.pdf"width"100%"height"100%"frameborder"0"></iframe>&l…...

编程日记 2026/3/14 16:05:48

网络运维学习笔记（DeepSeek优化版）002网工初级（HCIA-Datacom与CCNA-EI）子网划分与协议解析

文章目录子网划分与协议解析1. VLSM与CIDR技术解析1.1 VLSM（Variable Length Subnetwork Mask，可变长子网掩码）1.2 CIDR（Classless Inter-Domain Routing，无类域间路由） 2. 子网划分方法与计算2.1 常规划分…...

编程日记 2026/4/5 8:51:15

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码+数据库+文档)

在线骑行网站系统目录基于SpringBoot的在线骑行设计与实现一、前言二、系统设计三、系统功能设计 5.1用户信息管理 5.2 路线攻略管理 5.3路线类型管理 5.4新闻赛事管理四、数据库设计五、核心代码六、论文参考七、最新计算机毕设选题推荐八、源码获取…...

编程日记 2026/3/14 4:04:28

BUUCTF-Web方向21-25wp

目录 [HCTF 2018]admin弱口令session伪造 [MRCTF2020]你传你🐎呢[护网杯 2018]easy_tornado[ZJCTF 2019]NiZhuanSiWei[MRCTF2020]Ez_bypass第一层第二层 [HCTF 2018]admin 打开环境，有三处提示，一个跳转链接，一个登录注册&#x…...

编程日记 2026/4/3 17:37:42

软考——WWW与HTTP

1.万维网（world wide web） 是一个规模巨大的、可以资源互联的资料空间。由URL进行定位，通过HTTP协议传送给使用者，又由HTML来进行文件的展现。它的主要组成部分是：URL、HTTP、HTML。 （1）URL…...

编程日记 2026/4/7 15:23:21

GO 进行编译时插桩，实现零码注入

Go 编译时插桩 Go 语言的编译时插桩是一种在编译阶段自动注入监控代码的技术，目的是在不修改业务代码的情况下，实现对应用程序的监控和追踪。基本原理 Go 编译时插桩的核心思想是通过在编译过程中对源代码进行分析和修改，将监控代码注入到…...

编程日记 2026/4/8 1:44:41

为人工智能驱动的交通研究增强路面传感器数据采集

论文标题英文标题：Enhancing Pavement Sensor Data Harvesting for AI-Driven Transportation Studies 中文标题：为人工智能驱动的交通研究增强路面传感器数据采集作者信息 Manish Kumar Krishne Gowda Purdue University, 465 Northwestern Avenue,…...

编程日记 2026/4/1 21:08:27