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

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

news 2025/9/17 19:16:18

前言

上节,我们学习了

  • 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

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/7/14 21:22:23

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/9/9 10:11:52

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/9/13 17:46:11

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/7/28 19:57:25

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/9/10 8:11:45

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/9/5 15:11:07

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/8/19 16:14:29

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/9/12 19:00:19

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/9/13 17:38:44

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/9/12 11:11:41