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

08 v-text指令

news 文章来源：https://blog.csdn.net/qq_37703224/article/details/135054052 2025/1/11 10:04:15

概述

v-text指令主要是用来渲染文本内容，和双大括号的效果基本一致，所以使用场景非常少。

一般情况下，我们都会使用双大括号语法去渲染文本内容，而不是使用v-text指令。

基本用法

我们创建src/components/Demo08.vue，我们定义几个文本内容，然后分别用v-text渲染。

<script setup>
const s1 = "你好，张大鹏"
const s2 = "<h1>你好，张大鹏</h1>"
const s3 = "<h1 style='color: red'>你好，张大鹏</h1>"
</script>
<template><div v-text="s1"></div><div v-text="s2"></div><div v-text="s3"></div>
</template>

接着，我们修改src/App.vue，引入Demo08.vue并进行渲染：

<script setup>
import Demo from "./components/Demo08.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

然后，我们浏览器访问：http://localhost:5173/
在这里插入图片描述

代码分析

我们来看一下核心代码：

<div v-text="s3"></div>

然后再看看结果，从结果我们看出，变量的内容是什么，显示的结果就是什么。比如s2和s3，虽然是HTML的代码，但是v-text并不会将其以HTML的格式进行渲染，而是以纯文本的方式进行渲染。

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<script setup>
import Demo from "./components/Demo08.vue"
</script>
<template><h1>Vite5+Vue3</h1><div class="container"><Demo/></div>
</template>

src/components/Demo08.vue

<script setup>
const s1 = "你好，张大鹏"
const s2 = "<h1>你好，张大鹏</h1>"
const s3 = "<h1 style='color: red'>你好，张大鹏</h1>"
</script>
<template><div v-text="s1"></div><div v-text="s2"></div><div v-text="s3"></div>
</template>

启动方式

yarn
yarn dev

浏览器访问：http://localhost:5173/

相关文章：

08 v-text指令

概述 v-text指令主要是用来渲染文本内容&#xff0c;和双大括号的效果基本一致&#xff0c;所以使用场景非常少。 一般情况下&#xff0c;我们都会使用双大括号语法去渲染文本内容&#xff0c;而不是使用v-text指令。 基本用法 我们创建src/components/Demo08.vue&#xff…...

编程日记 2023/12/18 8:55:37

vite基本知识

vite的了解与使用 基本知识 开发时&#xff0c;并不对代码打包&#xff0c;而实直接采用ESM的方式运行项目一 项目部署时&#xff0c;再对项目进行打包 核心原理 其核心原理是利用浏览器现在已经支持ES6的import&#xff0c;碰见import就会发送一个HTTP请求去加载文件 使…...

编程日记 2023/12/18 8:54:35

考研真题c语言

【2016年山西大学考研真题】输入10个学生三门课的成绩&#xff0c;用函数实现&#xff1a;找出最高的分数所对应的学号和成绩。 1. 定义一个结构体 Student 来表示每个学生&#xff0c;包括学号和三门课的成绩。 c typedef struct { int studentID; int score1; i…...

编程日记 2023/12/18 8:53:34

neuq-acm预备队训练week 9 P8604 [蓝桥杯 2013 国 C] 危险系数

题目背景 抗日战争时期&#xff0c;冀中平原的地道战曾发挥重要作用。 题目限制 题目描述 地道的多个站点间有通道连接&#xff0c;形成了庞大的网络。但也有隐患&#xff0c;当敌人发现了某个站点后&#xff0c;其它站点间可能因此会失去联系。 我们来定义一个危险系数 DF…...

编程日记 2023/12/18 8:52:33

【BIG_FG_CSDN】*VMware17pro*Linux*Redhit6网络管理（个人向——学习笔记）

物理机中的网络 查看物理网络的方法 “网络连接”—>单点选中网络的选项-->菜单栏中“查看此连接状态”-->“详细信息” “网络连接”中的VM网卡 在主机上对应的有VMware Network Adapter VMnet1和VMware Network Adapter VMnet8两块虚拟网卡&#xff0c;它们分别…...

编程日记 2023/12/18 8:50:32

Nginx location+Nginx rewrite(重写）(新版)

Nginx locationNginx rewrite(重写) Nginx locationNginx rewrite(重写)一、location1、常用的Nginx 正则表达式2、location的类型3、location 的匹配规则4、location 优先级5、location 示例说明5.1只修改网页路径5.2修改nginx配置文件和网页路径5.3一般前缀5.4正则匹配5.5前缀…...

编程日记 2023/12/18 8:49:30

uniapp实现地图电子围栏功能

该功能使用uniapp中内置组件map实现 效果图预览&#xff1a; 实现过程&#xff1a; 1.文档&#xff1a; 2.代码&#xff1a; <template><view><map :style"width: 100%; height:screenHeight" :latitude"latitude" :longitude"longit…...

编程日记 2023/12/18 8:47:28

LeetCode第376场周赛

文章目录 1.Find Missing and Repeated Values2.Divide Array Into Arrays With Max Difference3.Minimum Cost to Make Array Equalindromic 1.Find Missing and Repeated Values 直接暴力过 class Solution { public:vector<int> findMissingAndRepeatedValues(vecto…...

编程日记 2023/12/18 8:44:25

数据仓库与数据挖掘小结

更加详细的只找得到pdf版本 填空10分 判断并改错10分 计算8分 综合20分 客观题 填空10分 判断并改错10分--错的要改 mooc中的--尤其考试题 名词解释12分 4个&#xff0c;每个3分 经常碰到的专业术语 简答题40分 5个&#xff0c;每道8分 综合 画roc曲线 …...

编程日记 2023/12/18 8:43:24

ensp创建配置环境，实现全网互访

文章目录 创建配置环境&#xff0c;实现全网互访配置步骤接入层交换机&#xff08;sw4、sw5&#xff09;划分vlan汇聚层交换机&#xff08;sw2、sw3&#xff09;配置ip地址作为vlan网关、与sw1 ip地址直连核心层交换机&#xff08;sw1&#xff09;配置ip地址与汇聚层交换机&…...

编程日记 2023/12/18 8:42:23

智能优化算法应用：基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.JAYA算法4.实验参数设定5.算法结果6.参考文献7.MA…...

编程日记 2023/12/18 8:40:21

ripro后台登录后转圈和图标不显示的原因及解决方法

最近&#xff0c;好多小伙伴使用ripro主题的小伙伴们都发现&#xff0c;登录后台后&#xff0c;进入主题设置就转圈&#xff0c;等待老半天后好不容易显示页面了&#xff0c;却发现图标不显示了&#xff0c;都统一显示为方框。 这是因为后台的js、css这类静态资源托管用的是js…...

编程日记 2023/12/18 8:39:20

android 源码编译android 12

一、python安装 python2 sudo apt-get install python python3 sudo apt-get install python3 二、repo管理多个git repo因为Android源码由多个git组成&#xff0c;故安装repo利于管理git工程. repo安装步骤 a.第一步, 新建一个空白文件夹保存repo引导文件,并包含你的路径…...

编程日记 2023/12/18 8:36:16

CSS第二天导读

1&#xff0c;Emmet语法 Emmet语法的前身是Zen coding&#xff0c;它使用缩写&#xff0c;来提高html / css 的编写速度&#xff0c;Vscode内部已经集成该语法 1.1&#xff0c;快速生成HTML结构语法 1.想要快速生成多个相同标签&#xff0c;加上*就可以了&#xff0c;比如 d…...

编程日记 2023/12/18 8:33:13

scroll-behavior属性使用方法

定义和用法&#xff1a; scroll-behavior 属性规定当用户单击可滚动框中的链接时&#xff0c;是否平滑地&#xff08;具动画效果&#xff09;滚动位置&#xff0c;而不是直线跳转。 <style>element{/* 核心代码 */scroll-behavior: smooth;} </style> 属性值&am…...

编程日记 2023/12/18 8:32:12

Python Django 连接 PostgreSQL 操作实例

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python Django 连接 PostgreSQL 操作实例&#xff0c;全文3500字&#xff0c;阅读大约10分钟 在Web开发中&#xff0c;使用Django连接到PostgreSQL数据库是一种常见的选择。…...

编程日记 2023/12/18 8:30:09

5.实现简化版raft协议完成选举

1.设计 前面已经完成了netty的集成&#xff0c;接下来就是借助netty完成选举就行了。 针对选举&#xff0c;我们用到了VotRequestMessage、VotRespMessage、当节点下线时NodeOfflineMessage、NodeOnlineMessage、NodeOnlineRespMessage 1.1 节点详细的交互 1.2 对所有消息的…...

编程日记 2023/12/18 8:29:08

服装管理系统 简单实现

服装管理系统 项目使用jsp servletmysql实现&#xff1b; 登陆注册 首页 首页显示服装信息 服装管理 1添加服装 2修改服装 3分页查询服装 4导出服装信息 5 导入服装信息 代码结构截图 百度网盘 链接&#xff1a;https://pan.baidu.com/s/1zfLHGMnrYd-JtnhzS5elYQ 提取码…...

编程日记 2023/12/18 8:27:06

深度学习项目实战：垃圾分类系统

简介&#xff1a; 今天开启深度学习另一板块。就是计算机视觉方向&#xff0c;这里主要讨论图像分类任务–垃圾分类系统。其实这个项目早在19年的时候&#xff0c;我就写好了一个版本了。之前使用的是python搭建深度学习网络&#xff0c;然后前后端交互的采用的是java spring …...

编程日记 2023/12/18 8:26:05

C#浅拷贝和深拷贝数据

目录 一、浅拷贝 二、深拷贝 一、浅拷贝 就是把原来的数据&#xff0c;复制一份&#xff0c;但是2份数据是共享地址的&#xff0c;修改第一份数据或者修改第二份数据&#xff0c;都会一起改变&#xff0c;这可能不是我们程序中需要的场景。 下面我们演示一下&#xff0c;首…...

编程日记 2023/12/18 8:25:02

【JVM】4.运行时数据区（程序计数器、虚拟机栈）

文章目录 4.JVM的运行时数据区4.1 程序计数器4.2 Java虚拟机栈4.3 虚拟机栈内存溢出 4.JVM的运行时数据区 4.1 程序计数器 程序计数器&#xff08;PC&#xff09;会记录着下一行字节码指令的地址。执行完当前指令后&#xff0c;PC刷新&#xff0c;JVM的执行引擎根据程序计数器…...

编程日记 2023/12/18 8:21:58

算法：程序员的数学读书笔记

目录 ​0的故事 ​一、按位计数法 二、不使用按位计数法的罗马数字 三、十进制转二进制​​​​​​​ ​四、0所起到的作用​​​​​​​ 逻辑 一、为何逻辑如此重要 二、兼顾完整性和排他性 三、逻辑 四、德摩根定律 五、真值表 六、文氏图 七、卡诺图 八、逻…...

编程日记 2023/12/18 8:20:57

机器学习算法---时间序列

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…...

编程日记 2023/12/18 8:19:56

RK3568/RV1126/RV1109/RV1106 ISP调试方案

最近一直在做瑞芯微rv1126的开发&#xff0c;由于项目性质&#xff0c;与camera打的交道比较多&#xff0c;包括图像的采集&#xff0c;ISP处理&#xff0c;图像处理&#xff0c;H.264/H.265编解码等各个方面吧。学到了不少&#xff0c;在学习的过程中&#xff0c;也得到了不少…...

编程日记 2023/12/18 8:15:50

【TB作品】51单片机，语音出租车计价器

西交大题目 1.语音出租车计价器 一、功能要求: 1.具有可模拟出租车车轮转速传感器的硬件设计,可计量出租车所走的公 里数。 2.显示和语音播报里程、价格和等待红灯或堵车的计时价格: 3.具有等待计时功能 4.具有实时年月日显示和切换功能。 5.操作简单、界面友好。 二、设计建议…...

编程日记 2023/12/18 8:08:43

jmeter简单压测kafka

前言 这也是一个笔记&#xff0c;就是计划用jmeter做性能测试&#xff0c;但是这里是只要将数据放到kafka的topic里&#xff0c;后面查看下游业务处理能力。 一、方案 因为只要实现数据放到kafka&#xff0c;参考了下博友的方案&#xff0c;可行。 二、方案验证 详细过程就不…...

编程日记 2023/12/18 8:05:40

【漏洞复现】红帆OA iorepsavexml.aspx文件上传漏洞

漏洞描述 广州红帆科技深耕医疗行业20余年，专注医院行政管控，与企业微信、阿里钉钉全方位结合，推出web移动一体化办公解决方案——iOffice20（医微云）。提供行政办公、专业科室应用、决策辅助等信息化工具，采取平台化管理模式，取代医疗机构过往多系统分散式管理，实现医…...

编程日记 2023/12/18 8:03:39

04_Web框架之Django一

Web框架之Django一 学习目标和内容 1、能够描述Django的作用 2、能够使用Django创建应用 3、能够使用GET和POST请求方式进行传参 4、能够使用Django的函数式方法定义视图 5、能够进行Django的配置文件修改 6、能够基本使用Django的路由定义 一、Django相关介绍 1、什么是Djan…...

编程日记 2023/12/18 8:00:36

单机架构到分布式架构的演变

目录 1.单机架构 2.应用数据分离架构 3.应用服务集群架构 4.读写分离 / 主从分离架构 5.引入缓存 —— 冷热分离架构 6.垂直分库 7.业务拆分 —— 微服务 8.容器化引入——容器编排架构 总结 1.单机架构 初期&#xff0c;我们需要利用我们精干的技术团队&#xff0c;快…...

编程日记 2023/12/18 7:59:35

1.新入手的32位单片机资源和资料总览

前言&#xff1a; 学了将近1年的linux驱动和uboot&#xff0c;感觉反馈不足&#xff0c;主要是一直在学各种框架&#xff0c;而且也遇到了门槛&#xff0c;比如驱动部分&#xff0c;还不能随心所欲地编程&#xff0c;原因是有些外设的原理还不够深刻、有些复杂的底层驱动的代码…...

编程日记 2023/12/18 7:57:33

wordpress内网oss/seo搜索引擎优化实战

2019独角兽企业重金招聘Python工程师标准>>> 算法很简单 如果你不明白&#xff0c;找一堆台球和两个杯子&#xff0c;想想怎么把球按照放的顺序取出来就行了。 整存整取思想package queueimport java.util.*fun main(args: Array<String>) {var twoStackQueue…...

编程日记 2025/1/11 7:09:58

wordpress 邮箱变更/好的seo公司营销网

一、路由基础Routing protocol 用于路由器动态寻找最优路径&#xff0c;并使路由器都拥有路由表&#xff0c;R/p 决定了数据包的上行路径&#xff0c;eg&#xff1a;RIP IGRP EIGRP OSPF,被动路由协议被分配到接口上并决定数据数据包的传送方式&#xff0c; Router:把一个数据包…...

编程日记 2025/1/11 6:26:19

上海建网站制/教育机构退费纠纷找谁

第一个JSP实际上&#xff0c;JSP只是简单地将Java放到HTML网页中去而已。你可以将现有的HTML网页将它们的扩展名由“.html”改为“.jsp”&#xff0c;这是一个创建第一个JSP最好的方法。我们可以将上一个练习中的文件将它的扩展名由“.html”改为“.jsp”。然后在浏览器中装载新…...

编程日记 2025/1/11 4:13:10

电子商务网站建设的结论/淘宝指数查询官网

1、按本站或各区域城市组织各位妈妈们在网站以宝宝照片经验交流形式SHOW自己可爱的宝宝&#xff0c;可按月、季、年设擂台&#xff0c;当然各擂主要设奖品&#xff1a;&#xff09;&#xff0c;奖品以后可由各赞助商提供&#xff1b; 2、宝宝SHOW分类&#xff1a; 2.1、【Bab…...

编程日记 2025/1/11 3:45:53

珠海哪家做企业网站公司好/咖啡seo是什么意思

航空订票系统系统(SSHMYSQLHTML5)(毕业论文近10000字, 包含程序代码,MySql数据库,数据库脚本) 【项目包含】【项目功能】【源码下载】本系统登录的角色有二种&#xff1a;会员、管理员、普通用户。管理员是能够管理会员信息、航班信息的管理、订单信息的管理、留言板的管理。会…...

编程日记 2025/1/11 3:01:35

asp 网站支持多语言/seo页面优化的方法

Silverlight 1.0 終於推出正式版了,但這只是拉開這場瀏覽器平台戰爭的序幕而已,真正精彩的還在後頭,ScottGu在他的Blog上有以下這段話.Silverlight 1.1 will include a cross-platform version of the .NET Framework, and will enable a rich .NET development experience in …...

编程日记 2025/1/11 2:03:22