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

【vue核心技术实战精讲】1.3 - 1.6 VUE 指令 （上）

news 2026/2/9 1:58:06

前言

上节,我们学习了

  • Vue的起步 和 插值表达式

本节内容

  • Vue指令之v-text 和 v-html
  • Vue指令之v-if 和 v-show
  • Vue指令之v-bind绑定
  • Vue指令之v-on事件处理

1、v-text 和 v-html

  • {{}} 和v-text的作用是一样的 都是插入值,直接渲染 ≈ innerText
  • v-html既能插入值 又能插入标签 ≈ innerHTML

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>指令之v-text和v-html</title>
</head>
<body><div id='app'><h1>{{ msg }}</h1><h2 v-text='msg'></h2><div v-html='htmlMsg'></div></div><script src="./vue.js"></script><script>// {{}}和v-text的作用是一样的 都是插入值 直接渲染 ≈ innerText// v-html既能插入值 又能插入标签 ≈ innerHTMLnew Vue({el:'#app',data:{msg:"插入标签",htmlMsg:'<h3>金榜探云手</h3>'}})</script>
</body>
</html>

效果

2、v-if 和 v-show

代码

<body><div id='app'><div v-if = "isShow">显示</div><div v-else>隐藏</div><h3 v-show = 'show'>金榜探云手</h3></div><script src="./vue.js"></script><script>// v-if v-else-if  v-else      v-shownew Vue({el: '#app',data: {isShow:Math.random() > 0.5,show:false}})</script>
</body>

效果

3、v-text 和 v-html

代码

效果

4、v-text 和 v-html

代码

效果

相关文章：

【vue核心技术实战精讲】1.3 - 1.6 VUE 指令 （上）

前言 上节,我们学习了 Vue的起步 和 插值表达式 本节内容 Vue指令之v-text 和 v-htmlVue指令之v-if 和 v-showVue指令之v-bind绑定Vue指令之v-on事件处理 1、v-text 和 v-html {{}} 和v-text的作用是一样的 都是插入值,直接渲染 ≈ innerTextv-html既能插入值 又能插入标签…...

编程日记 2024/3/25 8:14:02

vscode使用Runner插件将.exe文件统一放到一个目录下

找到右下角管理&#xff0c;点击扩展。 找到Code Runner插件&#xff0c;打开扩展设置。 向下翻&#xff0c;找到Executor Map&#xff0c;点击在settings.json中编辑。 在c和c的配置命令栏中增加\\\output\\即可。&#xff08;增加的目录不能自动创建&#xff0c;需要手动创建…...

编程日记 2024/3/25 8:09:56

[commonjs--resolver] Missing “./jsx-runtime.js“ specifier in “react“ package

修复vite构建时错误 vite打包,第三方包引用的react版本不一致问题修复(不是最优解) // vite.config.js import { defineConfig } from vite; import react from vitejs/plugin-react; import path from path;export default defineConfig({plugins: [react(), // 如果使用Rea…...

编程日记 2024/3/25 8:08:55

ETH Gas 之 Base Fee Priority Fee

前情回顾 ETH网络 之 Gas EIP-1559 EIP-1559 EIP-1559是以太坊改进提案&#xff08;Ethereum Improvement Proposal&#xff09;&#xff0c;旨在改进以太坊的交易费用机制。该提案引入了一种新的交易费用模型&#xff0c;以提高交易费用的可预测性和网络的效率。我们本文各…...

编程日记 2024/3/25 8:06:53

【小白入门篇1】GPT到底是怎样练成？

由于具有代表性的OpenAI公司GPT模型并没有开源&#xff0c;所以本章节是参考一些开源和现有课程&#xff08;李宏毅&#xff09;讲解ChatGPT原理。本章没有涉及到很多数学运算&#xff0c;比较适合小白了解GPT到底是怎么练成。GPT的三个英文字母分别代表Generative(生成式)&…...

编程日记 2024/3/25 8:04:52

Django——forms组件

Django——forms组件 forms组件&#xff1a;通过后端在Django中定义forms类&#xff0c;可以在 html 中动态的生成一个表单&#xff1b;检验用户提交的数据。 在应用中创建一个名为 &#xff1a;forms 的py文件 # 导入 forms 组件 from django import forms# 自定义 forms …...

编程日记 2024/3/25 8:02:50

利用K8S Statefulset搭建Etcd集群 - PVC存储

概述 在测试过程中发现&#xff0c;直接使用本地存储&#xff0c;当节点机器损坏了&#xff0c;对应机器的etcd数据也丢失了&#xff0c;故而做了利用K8S PV&#xff0c;PVC以及NFS来存储数据的尝试&#xff0c;经过一番折腾&#xff0c;测试成功&#xff0c;博文记录&#xf…...

编程日记 2024/3/25 8:00:48

手撕算法-接雨水

描述 分析 i位置能积累的雨水量&#xff0c;等于其左右两边最大高度的最小值。为了能获取i位置左右两边的最大高度。使用动态规划。两个dp数组&#xff1a; leftMaxrightMax 其中 leftMax[i] 代表i位置左边的最大高度rightMax[i] 代表i位置右边的最大高度 初始状态&#x…...

编程日记 2024/3/25 7:55:43

探索AI大模型学习：理论基础、技术突破与未来挑战

在当今技术飞速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;大模型学习无疑是推动科技进步和创新的关键力量。AI大模型学习的核心在于通过训练大规模的数据集来提升模型的性能&#xff0c;使之能够更准确、更高效地完成各种任务&#xff0c;从而在多个领域中实现…...

编程日记 2024/3/25 7:54:42

Linux：点命令source

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 source命令用于读取一个文件的内容并在当前Shell环境&#xff08;包括交互式Shell或是非交互式Shell&#xff09;执行里面的命令。它被称为点命令是因为命令名source也可…...

编程日记 2024/3/25 7:50:32

iOS开发 - 转源码 - __weak问题解决

iOS开发 - 转源码 - __weak问题解决 在使用clang转换OC为C代码时&#xff0c;可能会遇到以下问题 cannot create __weak reference in file using manual reference 原因 __weak弱引用是需要runtime支持的&#xff0c;如果我们还只是使用静态编译&#xff0c;是无法正常转换的…...

编程日记 2024/3/25 7:45:28

【Linux基础】dash和bash简介

Dash&#xff08;Debian Almquist Shell&#xff09;和 Bash&#xff08;Bourne Again Shell&#xff09;是 Unix/Linux 系统中的命令行 shell&#xff0c;用于执行命令、管理文件系统、编写脚本等任务的工具。 一、Dash和Bash的区别&#xff1a; Bash&#xff08;Bourne Agai…...

编程日记 2024/3/25 7:39:23

精读《如何做好 CodeReview》

1 引言 任何软件都是协同开发的&#xff0c;所以 CodeReview 非常重要&#xff0c;它可以帮助你减少代码质量问题&#xff0c;提高开发效率&#xff0c;提升稳定性&#xff0c;同时还能保证软件架构的稳定性&#xff0c;防止代码结构被恶意破坏导致难以维护。 所以 CodeRevie…...

编程日记 2024/3/25 7:37:20

双指针（滑动窗口）-算法刷题

一.移动零&#xff08;. - 力扣&#xff08;LeetCode&#xff09;&#xff09; 算法思想 &#xff1a; 设置两个指针left,right&#xff0c;将数组分为三块[0,left]为不为0的元素&#xff0c;[left1,right-1]为0元素&#xff0c;[right,num.size()-1]为未扫描的区域&#xff0c…...

编程日记 2024/3/25 7:36:19

上位机图像处理和嵌入式模块部署（qmacvisual之ROI设定）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 ROI&#xff0c;全称是region of interest&#xff0c;也就是感兴趣区域。这里面一般分成两种情况&#xff0c;一种是所有的算法都依赖于这个ROI&a…...

编程日记 2024/3/25 7:33:16

银行监管报送系统介绍（五）：金融统计数据大集中自动化报送系统——PBOC Report

人民银行金融统计数据大集中自动化报送系统&#xff08;简称PBOC Report&#xff09;&#xff0c;是基于现代计算机网络技术应用基础上&#xff0c;由人行总行设置金融统计数据服务器&#xff0c;建立的一个全国统一的金融统计数据库。 人行针对各银行存贷款、中间业务、网点人…...

编程日记 2024/3/25 7:31:13

常用中间件redis，kafka及其测试方法

常用消息中间件及其测试方法 一、中间件的使用场景引入中间件的目的一般有两个&#xff1a;1、提升性能常用的中间件&#xff1a;1) 高速缓存&#xff1a;redis2) 全文检索&#xff1a;ES3) 存日志&#xff1a;ELK架构4) 流量削峰&#xff1a;kafka 2、提升可用性产品架构中高可…...

编程日记 2024/3/25 7:29:12

ROS1通过rosbridge在局域网中控制turtle进行运动（PC和手机）

通过ROSbridge控制小海龟&#xff08;turtlesim&#xff09;的具体案例。使用一个简单的Python脚本通过通过局域网上连接上传ROSbridge服务器&#xff0c;并发送速度指令来控制小海龟的移动 功能包的结构如下&#xff1a; HTML文件的编写&#xff08;界面&#xff09; html用…...

编程日记 2024/3/25 7:25:07

MQ高级篇---消息可靠性

MQ的一些常见问题 后面内容基于springboot 2.3.9.RELEASE 消息可靠性 生产者确认机制 在publisher微服务中application.yml中添加 spring:rabbitmq:publisher-confirm-type: correlatedpublisher-returns: truetemplate:mandatory: true每个RabbitTemplate只能配置一个Return…...

编程日记 2024/3/25 7:24:06

SpringMVC | SpringMVC中的 “文件上传和下载”

目录: 一、文件上传1.1 文件上传“概述”1.2 文件上传“具体配置” :“前端”中配置“文件上传” ( type“file” 满足3个条件 )“后端”中配置“文件上传” ( 配置id为“CommonsMultipartResolver”的bean 配置“文件上传”的“约束条件” 通过“MultipartFile接口”参数接…...

编程日记 2024/3/25 7:23:05

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/2/5 5:05:56

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/2/2 22:06:13

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2026/1/31 17:02:38

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/2/2 0:52:30

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2026/1/31 14:20:10