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

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

news 2025/8/29 15:26:55

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

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/8/28 22:20:02

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/8/15 19:59:33

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/8/26 6:51:02

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/8/28 22:16:31

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/7/27 0:36:47

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/8/26 6:49:38

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/8/29 6:37:18

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/7/28 0:01:58

免费PDF转图片工具

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

编程新知 2025/8/22 5:43:07