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

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

news 2026/3/28 8:45:40

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

从隔离到互联：工业现场中耐达讯自动化CC-Link IE转Modbus RTU实战指南

在工业自动化领域中&#xff0c;不同协议设备间的通信壁垒正成为智能制造的核心挑战之一。耐达讯自动化的CC-Link IE转Modbus RTU专用网关&#xff0c;通过硬件级协议转换技术&#xff0c;高效实现CC-Link IE高速以太网与Modbus RTU串口设备的无缝对接&#xff0c;帮助企业快速…...

编程新知 2026/3/28 8:43:55

从桁架到螺栓：HM-3420在汽车后桥装配中的实战应用

HM-3420螺栓连接技术在汽车后桥装配中的创新实践 汽车后桥作为承载车身重量与传递动力的关键部件&#xff0c;其结构强度直接关系到整车安全性能。在传统装配工艺中&#xff0c;桁架连接往往面临应力集中、疲劳寿命不足等挑战。HM-3420螺栓连接系统的出现&#xff0c;为这一领域…...

编程新知 2026/3/28 6:40:48

大脑极简原理：比冯·诺依曼架构还简单的电磁路由网络 ——为什么意识和智能会从“对称判断”里自然涌现

前言&#xff1a;被复杂化的真相——大脑其实简单到爆我们从小被灌输一个观念&#xff1a;大脑是宇宙中最复杂的系统&#xff0c;860亿神经元、百万亿突触、无数神经递质&#xff0c;像一台精密到无法拆解的超级计算机。神经科学论文越写越长&#xff0c;模型越来越复杂&#x…...

编程新知 2026/3/28 6:34:48

Qwen3-4B Instruct-2507实际作品：用户说‘我要创业’→商业计划书框架生成

Qwen3-4B Instruct-2507实际作品&#xff1a;用户说‘我要创业’→商业计划书框架生成 1. 引言&#xff1a;当创业想法遇到AI助手 “我要创业&#xff01;” 这句话背后&#xff0c;往往是一个激动人心的想法&#xff0c;但随之而来的是一连串的现实问题&#xff1a;我的商业…...

编程新知 2026/3/28 6:00:27

M2LOrder模型管理实战：Python脚本自动扫描/opt目录并生成模型索引表

M2LOrder模型管理实战&#xff1a;Python脚本自动扫描/opt目录并生成模型索引表 1. 项目背景与需求 在实际的AI模型部署和维护过程中&#xff0c;我们经常会遇到模型文件分散存储、版本混乱、信息不透明的问题。M2LOrder情感识别系统就是一个典型的例子&#xff0c;它包含了9…...

编程新知 2026/3/28 5:12:00

STM32duino S2-LP无线驱动库：Sub-1GHz低功耗可靠通信实现

1. 项目概述STM32duino X-NUCLEO-S2868A2 是一款面向 STM32 平台的 Arduino 兼容库&#xff0c;专为驱动意法半导体&#xff08;STMicroelectronics&#xff09;推出的 X-NUCLEO-S2868A2 扩展板而设计。该扩展板核心搭载 S2-LP 超低功耗 Sub-1GHz 射频收发器芯片&#xff08;型…...

编程新知 2026/3/28 4:32:00

别再只会docker push了！Harbor镜像上传的5个隐藏技巧与实战避坑指南

Harbor镜像上传实战&#xff1a;5个高阶技巧与避坑指南 当你在凌晨三点被CI/CD流水线的失败通知惊醒&#xff0c;发现又是镜像上传问题导致整个发布流程卡住时&#xff0c;就会明白掌握Harbor的进阶用法有多重要。作为企业级容器镜像仓库&#xff0c;Harbor远比简单的docker pu…...

编程新知 2026/3/28 3:49:47

KLite：轻量级嵌入式实时操作系统内核解析

KLite&#xff1a;一款简洁易用的嵌入式实时操作系统内核 1. 项目概述 1.1 系统定位 KLite是一款面向嵌入式领域的轻量级抢占式实时操作系统内核&#xff0c;采用MIT开源协议发布。该系统专为资源受限的微控制器设计&#xff0c;核心设计理念是保持功能完整性的同时&#xff…...

编程新知 2026/3/28 3:27:24

从图像分割到GAN生成：转置卷积（Transpose Conv）的两种实战配置与调参心得

转置卷积实战指南&#xff1a;图像分割与GAN生成中的核心技巧 在计算机视觉领域&#xff0c;我们常常需要将低分辨率特征图恢复到原始尺寸——无论是为了像素级预测的图像分割任务&#xff0c;还是从潜在空间生成逼真图像的GAN模型。传统插值方法如双线性插值虽然简单&#xff…...

编程新知 2026/3/28 2:04:19

蓄电池与超级电容混合储能微电网的未讲解部分总结

蓄电池 超级电容混合储能微电网 没有讲解搞离网微电网的都懂&#xff0c;储能这块一直是卡脖子的事儿——单独堆蓄电池吧&#xff0c;遇到村里突然开个打米机、抽水泵这种大负载&#xff0c;瞬间电流顶上去&#xff0c;电瓶寿命唰唰掉&#xff1b;全上超级电容呢&#xff0c;确…...

编程新知 2026/3/28 1:11:38