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

插值表达式、Vue指令、指令补充

news 2026/2/7 15:47:32

vue上手步骤

<body><!-- vue2语法 --><!-- 1.准备容器：一会vue就会把数据展示到这里 --><div id="app"><!-- 4.使用{{ }}即可显示数据 ，{{}}就是插值表达式--><p>姓名：{{uname}}</p><p>朋友：{{friend.sex,friend.uname}}</p></div><!--2. 导入vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// 3.创建vue实例对象new Vue({el: '#app',//你要把数据展示到哪个元素里data: {// 这里放要展示的数据uname: 'zf',age: 30,friend: {sex: '男',uname: '齐齐'}},})</script></body>

在这里插入图片描述

插值表达式{{}}

在这里插入图片描述

Vue指令（查看菜鸟的模板语法）

v-html指令

指令：带有v-前缀的特殊标签属性
Vue会根据不同的指令，针对标签实现不同的功能
举例

<div v-html="str"></div> 相当于div对象.innHTML=str

<!-- vue2语法 --><!-- 1.准备容器：一会vue就会把数据展示到这里 --><div id="app"><p>{{str}}</p><p v-html="str">被覆盖</p></div><!--2. 导入vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// 3.创建vue实例对象const app = new Vue({el: '#app',//你要把数据展示到哪个元素里data: {str: '你是一个<strong>优秀</strong>的boy'},})</script>

在这里插入图片描述

v-show vs v-if

在这里插入图片描述

v-if和v-else-if和v-else指令
 <!-- vue2语法 --><!-- 1.准备容器：一会vue就会把数据展示到这里 --><div id="app"><p v-if="sex===1">性别：男</p><p v-else>性别：女</p><hr><p v-if="sorce>=90">成绩：A</p><p v-else-if="sorce>=80&&sorce<90">成绩：B</p><p v-else-if="sorce>=60&&sorce<80">成绩：C</p><p v-else>成绩：D</p></div><!--2. 导入vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// 3.创建vue实例对象const app = new Vue({el: '#app',//你要把数据展示到哪个元素里data: {sex: 1,//1男，2女sorce: 65 //分数},})</script>

在这里插入图片描述

v-on(注册事件)

在所有的方法中this永远指向vue的实例对象
在这里插入图片描述

  <!-- vue2语法 --><!-- 1.准备容器：一会vue就会把数据展示到这里 --><div id="app"><button v-on:click="count++">+1</button><p>{{count}}</p><button v-on:click="count--">-1</button><button @click="fn">点击+10</button></div><!--2. 导入vue.js --><script src="../utils/vue.js"></script><script>// 3.创建vue实例对象const app = new Vue({el: '#app',//你要把数据展示到哪个元素里data: {count: 1,},methods: {       // 提供处理逻辑函数// 在所有的方法中。this永远表示vue的实例对象fn() {this.count = this.count + 10},// 方法名2}})</script>
调用v-on指令传参
  <button @click="fn(实参1，实参2)">点击+10</button

  methods: {       // 提供处理逻辑函数// 在所有的方法中。this永远表示vue的实例对象fn(a,b) {this.count = this.count + 10},}
v-on事件对象(对标js事件委托时的e)
<div id="app"><h2>需要,在输入框中输入内容，将内容显示到p标签中</h2><!-- 1️⃣如果在模板(页面中)使用事件对象，可以使用$event(固定语法) --><input type="text" @input="result1=$event.target.value"><p>{{result1}}</p><hr><input type="text" @input="fn">//3️⃣如果函数中传递多个参数，则使用$event传递e//        <input type="text" @input="fn(1,2,$event)"><p>{{result2}}</p></div><script src="../utils/vue.js"></script><script>const app = new Vue({el: '#app',data: {result1: '',result2: ''},methods: {fn(e) {// 2️⃣如果在js中使用事件对象，还是使用事件处理函数的形参ethis.result2 = e.target.value}}})</script>

在这里插入图片描述

v-bind（v-bind:可简写为：）

作用：动态的设置html的标签属性-> src、url、title …
语法：v-bind:属性名=“表达式”

v-for

1.作用：基于数据循环，多次渲染整个元素

v-for中的key（必须加）

key的作用：给元素添加的唯一标识，便于Vue进行列表项的正确排序复用

<li v-for="item in arr" :key="key值不能重复"></li>

注意点：
1.key的值只能是字符串或数字类型
2.key的值必须具有唯一性
3.推荐使用id作为key(唯一），不推荐使用index作为key(会变化，不对应)

v-model(数据的双向绑定)（给表单元素使用）

指令补充

指令修饰符

在这里插入图片描述

v-bind对于样式操作的增强

v-modal应用于其他表单元素

相关文章：

插值表达式、Vue指令、指令补充

vue上手步骤 <body><!-- vue2语法 --><!-- 1.准备容器&#xff1a;一会vue就会把数据展示到这里 --><div id"app"><!-- 4.使用{{ }}即可显示数据 &#xff0c;{{}}就是插值表达式--><p>姓名&#xff1a;{{uname}}</p><…...

编程日记 2024/3/28 1:56:11

qiankun实现基座、子应用样式隔离

目录 qiankun 实现主应用与子应用样式隔离使用CSS-in-JS来实现样式隔离react-jssstyled-components qiankun 实现主应用与子应用样式隔离 qiankun 之中默认的样式隔离是针对子应用与子应用之间的。至于主应用的样式会影响到子应用&#xff0c;若需要&#xff0c;则需要配置进行…...

编程日记 2024/3/28 1:54:09

C语言从入门到实战----数据在内存中的存储

1. 整数在内存中的存储 在讲解操作符的时候&#xff0c;我们就讲过了下⾯的内容&#xff1a; 整数的2进制表⽰⽅法有三种&#xff0c;即 原码、反码和补码 有符号的整数&#xff0c;三种表⽰⽅法均有符号位和数值位两部分&#xff0c;符号位都是⽤0表⽰“正”&#xff0c;⽤…...

编程日记 2024/3/28 1:53:08

接口关联和requests库

一、接口关联 postman的接口 postman的接口关联配置&#xff1a;js代码&#xff0c;重点在于思路。 // 定义jsonData这个变量 接受登录接口的返回结果 var jsonData JSON.parse(responseBody); // 从返回结果里提取token/id值&#xff0c;并赋值给token/id变量值作为环境变…...

编程日记 2024/3/28 1:52:08

Python编程基础 001 开篇:为什么要学习编程

Python编程基础 001 开篇:为什么要学习编程 一、什么是程序&#xff0c;什么是编程二、学习编程对青少年的价值&#xff08;一&#xff09;未来社会的需要&#xff08;二&#xff09;学习对现青少年现的现阶段的直接影响 三、学习编程从什么时候开始&#xff08;一&#xff09;…...

编程日记 2024/3/28 1:50:06

AQS源码分析

前言 AbstractQueuedSynchronizer是抽象同步队列&#xff0c;其是实现同步机器的基础组件&#xff0c;并发包中的锁的底层就是使用AQS实现的。AQS中 维护了一个volatile int state&#xff08;代表共享资源&#xff09;和一个FIFO线程等待队列&#xff08;多线程争用资源被阻塞…...

编程日记 2024/3/28 1:47:03

应对Locked勒索病毒威胁：你的数据安全准备好了吗？

导言&#xff1a; .Locked勒索病毒&#xff0c;作为一种新型的恶意软件&#xff0c;已经在全球范围内引起了广泛的关注。这种病毒通过加密受害者的文件&#xff0c;并要求支付赎金以获取解密密钥&#xff0c;从而实现对受害者的勒索。本文旨在深入解析.Locked勒索病毒的特点、…...

编程日记 2024/3/28 1:43:00

周末分享一篇关于html和http的文章吧

前面咱们说了https://blog.csdn.net/luohaitao/article/details/136974344&#xff08;说道说道JSP和HTTP吧-CSDN博客&#xff09;&#xff0c;把http的方法和jsp中httpservle对象的方法对上号了&#xff0c;其实从开发的角度看&#xff0c;jsp就是html中混入了java的服务端代码…...

编程日记 2024/3/28 1:41:59

Frechet分布

Frechet分布是一种连续概率分布&#xff0c;它是极值统计中的一个重要模型&#xff0c;尤其在分析极端事件&#xff08;如洪水、地震、金融市场中的极端波动&#xff09;的最大值极限分布时扮演关键角色。Frechet分布属于极值分布的三种基本类型&#xff08;I型、II型、III型&a…...

编程日记 2024/3/28 1:38:56

vue3全局引入element-plus使用Message教程

文章目录 安装引入 Element Plus和组件样式示例注意安装与引入&#xff1a;按需引入&#xff1a;API 使用&#xff1a;样式问题&#xff1a;组件上下文&#xff1a;版本兼容性&#xff1a;错误处理&#xff1a; 这是 Element UI 的 Vue 3 版本。ElMessage 是 Element Plus 中的…...

编程日记 2024/3/28 1:37:55

时序预测 | Matlab实现BiTCN-BiLSTM双向时间卷积神经网络结合双向长短期记忆神经网络时间序列预测

时序预测 | Matlab实现BiTCN-BiLSTM双向时间卷积神经网络结合双向长短期记忆神经网络时间序列预测 目录 时序预测 | Matlab实现BiTCN-BiLSTM双向时间卷积神经网络结合双向长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现BiTCN…...

编程日记 2024/3/28 1:36:53

基于 Linux 的更新版 MaxPatrol VM 可扫描 Windows

&#x1f47e; MaxPatrol VM 2.1 是俄罗斯唯一一款可以安装在 Linux 上并以审计和五重测试模式扫描 Windows 主机&#xff08;甚至是旧版本&#xff09;的漏洞管理产品。 让我们告诉你更新后的 MaxPatrol VM 还有哪些有用的功能&#xff1a; 1. 由于采用了新的数据存储模式&a…...

编程日记 2024/3/28 1:33:51

【软件开发】给Ubuntu 18.04虚拟机安装最新的Python 3.12.2

一、前言 笔者在Windows 11主机上安装有Ubuntu 18.04虚拟机&#xff08;使用虚拟化平台Oracle VM VirtualBox&#xff09;&#xff0c;在Python3.6的使用过程中遇到了问题&#xff0c;决定安装Python 3.12.2&#xff0c;在此记录安装过程。 二、安装过程&#xff08;在Ubuntu…...

编程日记 2024/3/28 1:32:49

鸿蒙NXET实战：高德地图定位SDK【获取Key+获取定位数据】（二）

如何申请key 1、创建新应用 进入[控制台]&#xff0c;创建一个新应用。如果您之前已经创建过应用&#xff0c;可直接跳过这个步骤。 2、添加新Key 在创建的应用上点击"添加新Key"按钮&#xff0c;在弹出的对话框中&#xff0c;依次&#xff1a;输入应用名名称&…...

编程日记 2024/3/28 1:31:48

Dubbo管理控制台

1.将资料中的dubbo-admin-2.6.0.war文件复制到tomcat的webapps目录下 2.启动tomcat,修改WEB-INF下的dubbo.properties文件 #如果Zookeeper是安装在虚拟机上的那么注册中心的地址需要修改为虚拟机的ip地址 dubbo.registry.addresszookeeper://192.168.100.110:2181 dubbo.admin…...

编程日记 2024/3/28 1:29:46

CSS问题精粹1

1.关于消除<li>列表前的符号 我相信很多人在初学CSS时会遇到该问题&#xff0c;无论是创作导航&#xff0c;还是列表&#xff0c;前面都会有个黑点点或其它符号。 解决该问题其实很简单 采用list-style-type:none或list-style:none直接解决 如果你想更换前面的黑点点&a…...

编程日记 2024/3/28 1:28:45

neo4j所有关系只显示RELATION，而不显示具体的关系

当看r时&#xff0c;真正的关系在properties中的type里&#xff0c;而type为“RELATION” 造成这个的原因是&#xff1a; 在创建关系时&#xff0c;需要指定关系的类型&#xff0c;这是固定的&#xff0c;不能像属性那样从CSV文件的一个字段动态赋值。标准的Cypher查询语言不支…...

编程日记 2024/3/28 1:25:42

VMware和Xshell连接

1.开启虚拟机 2.使用管理员账户&#xff0c;点击未列出 3.输入用户名密码 4.点击编辑虚拟网络编辑器 5.记住自己的网关和IP地址 6.打开终端 7.输入命令&#xff0c;vim / etc / sysconfig / network -scripts / ifcfg-ens33 回车 8.修改图中两处按“ I ”键进入编辑 d…...

编程日记 2024/3/28 1:21:38

【C语言进阶篇】编译和链接

【C语言进阶篇】编译和链接 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;C语言&#x1f353; &#x1f33c;文章目录&#x1f33c; 编译环境与运行环境 1. 翻译环境 2. 编译环境&#xff1a;预编译&#xff08;预处理&#xff09;编…...

编程日记 2024/3/28 1:20:37

pytorch+tensorboard

安装依赖 pip install teorboard pip install torch_tb_profiler了解teorboard 记录并可视化标量[组]、图片[组]。 如何使用 第一步：构建模型，记录中间值，写入summarywriter 每次写入一个标量add_scalar 比如： from torch.utils.tensorboard import SummaryWriter wr…...

编程日记 2024/3/28 1:19:36

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2026/1/26 9:07:56

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2026/2/3 15:45:51

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2026/1/19 6:41:37

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/12/15 17:19:38

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

编程新知 2025/9/20 3:28:39