VUE指令(一)
vue会根据不同的指令,针对不同的标签实现不同的功能。指令是带有 v- 前缀的特殊标签属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
1、v-text:设置元素的文本内容,不会解析div标签、样式等;
2、v-html :设置元素的innerHTML(v-html=“表达式”),会解析div标签、样式等;
<div id="app"><p>{{content}}</p><p v-html="content">{{content}}</p><p v-text="content">{{content}}</p></div>data: {content: '<strong>vue使用步骤</strong>'}

3、v-show:通过切换 display:none来控制元素显示还是隐藏,v-show = "表达式(值 true 显示, false 隐藏)",适合于频繁切换显示隐藏的场景;
4、v-if:基于条件判断,通过创建或移除元素节点来控制元素的显示和隐藏,v-if = "表达式(值 true 显示, false 隐藏)",适合于显示隐藏切换不频繁的场景;
5、v-else/v-else-if:配合v-if使用,进行链式调用,v-else-if="表达式",v-else。需紧跟v-if使用
<div id="app"><p v-if="gender === 1">性别:♂ 男</p><p v-else>性别:♀ 女</p><hr><p v-if="score >= 90">成绩评定A</p><p v-else-if="score >= 70">成绩评定B</p><p v-else-if="score >= 60">成绩评定C</p><p v-else>成绩评定D</p></div>
6、v-on:给元素添加事件监听及处理逻辑;v-on:事件名="内联语句/methods中的函数名";v-on还可简写为@;如果再模板(页面)中使用事件对象,可以使用$event,如果再js中使用事件对象,则使用事件处理函数的形参e;
<div id="app"><button @click="count--">-</button><span>{{ count }}</span><button v-on:click="count++">+</button>
</div>
<div id="app"><button @click="fn">v-on函数名</button></div>methods: {fn () {console.log('v-on函数名')}}
修饰符:.stop - 调用 event.stopPropagation();
.prevent - 调用 event.preventDefault();
.capture - 在捕获模式添加事件监听器;
.self - 只有事件从元素本身发出才触发处理函数;
.{keyAlias} - 只在某些按键下触发处理函数;
.once - 最多触发一次处理函数;
.left - 只在鼠标左键事件触发处理函数;
.right - 只在鼠标右键事件触发处理函数;
.middle - 只在鼠标中键事件触发处理函数;
.passive - 通过 { passive: true } 附加一个 DOM 事件。
7、v-bind:动态的设置html的标签属性(src,title,url等),v-bind:属性名="表达式",可简写为:属性名="表达式";
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
<img :src="imgUrl" :title="msg" alt="">data: {imgUrl: './imgs/10-02.png',msg: 'hello 波仔'
}相关文章:
VUE指令(一)
vue会根据不同的指令,针对不同的标签实现不同的功能。指令是带有 v- 前缀的特殊标签属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 1、v-text:设置元素的文本内容,不会解…...
微信小程序开发学习笔记《7》全局配置以及小程序窗口
微信小程序开发学习笔记《7》全局配置以及小程序窗口 博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。全局配置官方文档 一、全局配置文件及常用的配置项 小程序根目录下的app.json 文件是小程序的全局配置文件。 常用的配置项如…...
Vue、uniApp、微信小程序、Html5等实现数缓存
此文章带你实现前端缓存,利用时间戳封装一个类似于Redis可以添加过期时间的缓存工具 不仅可以实现对缓存数据设置过期时间,还可以自定义是否需要对缓存数据进行加密处理 工具介绍说明 对缓存数据进行非对称加密处理 对必要数据进行缓存,并…...
如何将ArcGIS工程文件迁移到ArcGIS Pro内
当你刚接触ArcGIS Pro的时候,尝试新建一个工程文件会发现工程文件的后缀已经改变,那么以前在ArcGIS内辛苦制作的工程文件是否就不能在ArcGIS Pro内使用了,答案是否定的,对此Esri也给出了解决方案,这里为大家介绍一下迁…...
Jenkins基础篇--添加用户和用户权限设置
添加用户 点击系统管理,点击管理用户,然后点击创建用户(Create User) 用户权限管理 点击系统管理,点击全局安全配置,找到授权策略,选择安全矩阵,配置好用户权限后,点击…...
C语言基础内容(七)——第08章_C语言常用函数
文章目录 第08章_C语言常用函数本章专题脉络1、字符串相关函数1.1 字符串的表示方式1.2 两种方式的区别1.2 字符串常用函数strlen()strcpy()strncpy()strcat()strncat()strcmp()strlwr()/strupr()1.3 基本数据类型和字符串的转换基本数据类型 -> 字符串字符串 -> 基本数据…...
CRM系统针对销售管理有哪些功能?如何帮助销售效率增长?
从长远来看,有效的CRM管理系统可以帮助您的企业达到甚至超过收入目标。现代大多数企业都依靠CRM系统来管理其销售周期并增加收入。但是,当大多数人提到CRM时,他们指的是使能够改善业务关系并轻松管理不断团队的软件或工具。合格的CRM系统能够…...
基于Pixhawk和ROS搭建自主无人车(一):底盘控制篇
参考 ArduPilot Development超维空间科技乐迪MiniPix车船使用说明书 1. 硬件篇 1.1 底盘构成一览 1.2 底盘接线示意 2. 软件篇 2.1 APM 固件下载 pixhawk 是硬件平台,PX4 是 pixhawk 的原生固件,APM(Ardupilot Mega)是硬件平台…...
部署 Spring Boot 应用中文文档
本文为官方文档直译版本。原文链接 部署 Spring Boot 应用中文文档 引言部署到云Cloud Foundry与服务绑定 KubernetesKubernetes 容器生命周期 HerokuOpenShift亚马逊网络服务(AWS)AWS Elastic Beanstalk使用 Tomcat 平台使用 Java SE 平台 总结 CloudCa…...
【数据库原理】(23)实际应用中的查询优化方法
一.基于索引的优化 索引是数据库查询优化的关键工具之一。合理地使用索引可以显著提高查询速度,降低全表扫描的成本。以下是建立和使用索引的一些基本原则和最佳实践。 索引的建立与使用原则 数据量规模与查询频率: 值得建立索引的表通常具有较多的记录࿰…...
MySQL中datetime和timestamp的区别
datetime和timestamp的区别 相同点: 存储格式相同 datetime和timestamp两者的时间格式都是YYYY-MM-DD HH:MM:SS 不同点: 存储范围不同. datetime的范围是1000-01-01到9999-12-31. 而timestamp是从1970-01-01到2038-01-19, 即后者的时间范围很小. 与时区关系. datetime是存储…...
2024年如何使用WordPress构建克隆Udemy市场
您想创建像 Udemy 这样的学习管理 (LMS) 网站吗?最好的学习管理系统工具LifterLMS将帮助您制作像Udemy市场这样的 LMS 网站。 目录 Udemy市场是什么? 创建 Udemy 克隆所需的几项强制性技术: 步骤 1) 注册您的域名 步骤 2) 获取虚拟主…...
(leetcode)Z字形变换 -- 模拟算法
个人主页:Lei宝啊 愿所有美好如期而遇 题目链接 . - 力扣(LeetCode) 输入描述 string convert(string s, int numRows),输入一个字符串s,以及一个行数numRows,将字符串按照这个行数进行Z字形排列&…...
STM32--基于STM32F103的MAX30102心率血氧测量
本文介绍基于STM32F103ZET6MAX30102心率血氧测量0.96寸OLED(7针)显示(完整程序代码见文末链接) 一、简介 MAX30102是一个集成的脉搏血氧仪和心率监测仪生物传感器的模块。它集成了一个红光LED和一个红外光LED、光电检测器、光器…...
Qt/C++音视频开发63-设置视频旋转角度/支持0-90-180-270度旋转/自定义旋转角度
一、前言 设置旋转角度,相对来说是一个比较小众的需求,如果视频本身带了旋转角度,则解码播放的时候本身就会旋转到对应的角度显示,比如手机上拍摄的视频一般是旋转了90度的,如果该视频文件放到电脑上打开,一些早期的播放器可能播放的时候是躺着的,因为早期播放器设计的…...
Python电能质量扰动信号分类(五)基于CNN-Transformer的一维信号分类模型
目录 往期精彩内容: 引言 1 数据集制作与加载 1.1 导入数据 1.2 制作数据集 2 CNN-Transformer分类模型和超参数选取 2.1定义CNN-Transformer分类模型 2.2 设置参数,训练模型 3 模型评估 3.1 准确率、精确率、召回率、F1 Score 3.2 十分类混淆…...
基于Vue组合式API的实用工具集
简介 今天,给大家分享一个很实用的工具库 VueUse,它是基于 Vue Composition Api,也就是组合式API。支持在Vue2和Vue3项目中进行使用,据说是目前世界上Star最高的同类型库之一。 图片 官方地址:https://vueuse.org/ 中文地址:https://www.vueusejs.com/ github:https…...
065:vue中将一维对象数组转换为二维对象数组
第065个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使…...
mysql 字符串分割
目录 前言substring_indexsubstring_index 特性字符串分割 前言 略 substring_index 正向截取字符串 mysql> select substring_index(www.baidu.com,.,1); ---------------------------------------- | substring_index(www.baidu.com,.,1) | -------------------------…...
解决Windows11 “我们无法设置移动热点”
目录 问题复现解决办法①启动网络适配器②打开移动热点③共享网络连接④连接移动热点总结 问题复现 因为交换机上网口限制,开发环境暂时没有WIFI设备,只有一根网线和一台笔记本电脑。于是开启笔记本电脑的WiFi共享服务。结果提示 “我们无法设置移动热点…...
【数据结构】数组与特殊矩阵
数据结构的学习中,数组与特殊矩阵是基础且核心的内容。它们不仅是程序设计中最常用的线性结构,更是处理复杂矩阵运算的基础。本文将结合解析与真题,带你彻底搞懂数组的存储方式和特殊矩阵的压缩存储技巧。一、一维数组与二维数组:…...
Suno API:生成 AI 音乐的完整指南
简介 Suno API 是 Ace Data Cloud 提供的一项强大服务,旨在将 AI 音乐生成能力集成到您的应用程序中。借助这一稳定且全面的 RESTful API,您可以创建自定义歌曲、纯音乐、混音、翻唱等。本文将详细介绍如何使用 Suno API,并提供快速上手的指…...
从语义熵到可信AI:构建大语言模型幻觉检测的通用框架
1. 当AI开始"胡说八道":什么是大语言模型幻觉? 想象一下,你正在咨询一位AI客服关于某款手机的参数。它信誓旦旦地告诉你"这款手机搭载了最新款骁龙8Gen3芯片,电池容量5000mAh",而实际上这款手机用…...
革新性PDF可视化标记技术:从原理到实践的全方位解析
革新性PDF可视化标记技术:从原理到实践的全方位解析 【免费下载链接】obsidian-pdf-plus PDF: the most Obsidian-native PDF annotation & viewing tool ever. Comes with optional Vim keybindings. 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-…...
CLIP-GmP-ViT-L-14图文匹配工具入门必看:上传图片+批量文本匹配全流程
CLIP-GmP-ViT-L-14图文匹配工具入门必看:上传图片批量文本匹配全流程 你是不是经常好奇,AI到底能不能看懂图片?比如,你给它一张小狗的照片,它能准确说出这是“一只狗”而不是“一只猫”或“一辆车”吗?今天…...
AVR机器人固件基座:负熵架构与确定性调度
1. 项目概述“Negentropic Base”是一个面向AVR微控制器平台的嵌入式固件基础框架,专为移动机器人(尤其是轮式探测车、自主巡线小车、轻量级自主导航平台)设计。其名称中的“Negentropic”(负熵)并非玄学术语ÿ…...
SDMatte与LSTM结合研究:时序视频抠图的初步探索
SDMatte与LSTM结合研究:时序视频抠图的初步探索 1. 引言:视频抠图的新挑战 视频抠图技术一直是影视后期和内容创作领域的重要工具。传统的静态图像抠图方法在处理视频时常常面临一个棘手问题:帧与帧之间的结果不一致,导致最终视…...
告别重复造轮子:用快马ai一键生成arm7标准外设驱动,效率提升50%
作为一名嵌入式开发者,我经常需要和ARM7这类微控制器打交道。每次新项目启动,最头疼的就是那些重复性的外设驱动编写工作——尤其是定时器中断这种基础功能,虽然逻辑简单,但写起来特别耗时。最近发现InsCode(快马)平台的AI生成功能…...
亿级并发下的抢票系统架构:从DDD到微服务的实战解析
1. 抢票系统的业务挑战与技术痛点 每年春运期间,12306系统都要面对全球最严苛的高并发考验。2019年春运最高峰日点击量达到1495亿次,相当于每个中国人当天点击了100多次。这种量级的并发请求,如果直接打到数据库上,就算是把阿里云…...
PrivLLM 协变混淆:隐私保护的 LLM 推理高效实现
用户接入云上大模型(LLM)时,通常面临端-云数据交互如提示词上传等隐私泄露风险。常规脱敏和加密手段难以同时保障数据安全隐私和推理高效准确,陷入“安全”与“智能”不可兼得的困局。为此,字节跳动安全研究团队提出了…...
