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

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

news 2025/12/15 17:13:41

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

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/12/9 1:32:28

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/12/9 4:34:34

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/29 10:54:34

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/12/14 4:06:59

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/12/14 4:22:15