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

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

news 2026/4/6 7:33:35

前言

上节,我们学习了

  • 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

Sony FCB-EV9500L LVDS图像闪烁问题分析

在基于高清图像采集与远距离传输的系统中&#xff0c;Sony FCB-EV9500L作为一款高性能一体化机芯模组&#xff0c;被广泛应用于安防监控、工业视觉及医疗设备等领域。在实际应用过程中&#xff0c;部分工程师反馈其在LVDS传输链路中出现图像闪烁问题。本文将围绕LVDS信号特性、…...

编程新知 2026/4/6 6:59:49

从经典控制器到前沿控制的发展

目录 前言 一、PID控制 1.数字PID 2.PID参数的优化 1.微分项的问题 2.积分项的问题 3.PID参数整定法 3.PID参数对系统性能指标的影响 二、模糊控制 1.模糊控制的五大核心步骤 1.模糊化 2.建立模糊规控制规则 3.模糊推理与解模糊 2.模糊PID 1.直接型模糊PID 2.增…...

编程新知 2026/4/6 5:50:23

造相-Z-Image-Turbo 在运维监控中的创意应用：生成系统状态拟人化报告图

造相-Z-Image-Turbo 在运维监控中的创意应用&#xff1a;生成系统状态拟人化报告图 每次打开监控大屏&#xff0c;面对满屏跳动的数字和密密麻麻的曲线图&#xff0c;你是不是也感到一阵视觉疲劳&#xff1f;CPU 80%、内存占用率65%、网络丢包0.1%……这些冰冷的指标虽然精确&…...

编程新知 2026/4/6 5:48:22

5步搞定：Z-Image-Turbo_UI界面LoRA使用教程，轻松玩转多种画风

5步搞定&#xff1a;Z-Image-Turbo_UI界面LoRA使用教程&#xff0c;轻松玩转多种画风 作为一名AI绘画工具的重度使用者&#xff0c;我深知新手最需要的是什么——不是复杂的参数解释&#xff0c;而是简单明了的操作指南。今天要介绍的Z-Image-Turbo_UI界面&#xff0c;可能是你…...

编程新知 2026/4/6 5:26:17

百川2-13B-4bits量化模型+OpenClaw：低成本自动化办公方案实测

百川2-13B-4bits量化模型OpenClaw&#xff1a;低成本自动化办公方案实测 1. 为什么选择量化模型OpenClaw组合 去年我接手了一个需要处理大量邮件的项目&#xff0c;每天要花3小时在重复性回复上。当我尝试用OpenClaw自动化流程时&#xff0c;发现原版大模型的显存占用让我的R…...

编程新知 2026/4/6 5:02:05

告别鼠标流！用STM32CubeIDE快捷键玩转代码导航与重构（实战演示）

告别鼠标流&#xff01;用STM32CubeIDE快捷键玩转代码导航与重构&#xff08;实战演示&#xff09; 在嵌入式开发的世界里&#xff0c;效率就是生命线。当你面对一个庞大的STM32工程&#xff0c;频繁在数千行代码中穿梭时&#xff0c;每一次不必要的鼠标点击都在蚕食宝贵的开发…...

编程新知 2026/4/6 4:57:56

2026年04月05日最热门的开源项目(Github)

在本期榜单中&#xff0c;有多个项目得到了较高的关注和热度&#xff0c;以下是对这些项目的一些分析&#xff1a; 总体趋势&#xff1a; 本期榜单主要集中在与人工智能&#xff08;AI&#xff09;、代码生成和代理系统相关的项目上。很多项目致力于提高代码效率、优化开发流程…...

编程新知 2026/4/6 4:30:44

gallery用户留存技巧：提高本地AI平台用户的活跃度

gallery用户留存技巧&#xff1a;提高本地AI平台用户的活跃度 【免费下载链接】gallery A gallery that showcases on-device ML/GenAI use cases and allows people to try and use models locally. 项目地址: https://gitcode.com/GitHub_Trending/gallery44/gallery …...

编程新知 2026/4/6 3:32:31

嵌入式工程师职业发展：原厂与方案商技术深度对比

1. 嵌入式工程师的职业抉择&#xff1a;原厂与方案商深度对比最近一位工作三年的嵌入式工程师朋友分享了他的求职经历&#xff0c;让我感触颇深。他在方案商做了三年应用开发后&#xff0c;最终选择跳槽到芯片原厂。这个决定背后&#xff0c;反映了很多嵌入式工程师都会面临的职…...

编程新知 2026/4/6 3:03:00

形式验证实战：5个降低状态空间复杂度的黑科技（附内存控制器案例）

形式验证实战&#xff1a;5个降低状态空间复杂度的黑科技&#xff08;附内存控制器案例&#xff09; 在芯片设计领域&#xff0c;形式验证&#xff08;Formal Verification, FV&#xff09;正逐渐成为确保设计正确性的重要手段。然而&#xff0c;随着设计复杂度的提升&#xff…...

编程新知 2026/4/6 2:28:26