vue快速入门(三) 之 v-text v-html

最新推荐文章于 2022-07-04 20:04:11 发布
最新推荐文章于 2022-07-04 20:04:11 发布
阅读量339 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44415928/article/details/104896036
版权
1.v-text

在这里插入图片描述
在这里插入图片描述
可以看出来v-text的作用就是把后边的变量message的值添加到div的文本内容部分,功能类似于在div文本处写{{message}}
在这里插入图片描述
在这里插入图片描述
我们发现v-text是吧标签里边的所有文本全都替换,而{{}}则不会,这是区别
在这里插入图片描述
在这里插入图片描述
另外这两个都支持字符串的拼接

2.v-html

在这里插入图片描述
注意到这次我们在message里边加上了h1标签,分别用v-text和v-html来做测试
在这里插入图片描述
发现v-html可以吧文本里的HTML代码转化成HTML格式,而v-text则是有啥就是啥

一口木桶饭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue-day1】Vue获取Html标签中的值
m0_57450589的博客
03-03 7112
方法1：在自定义函数中加上$event，在js函数中可以获取到点击事件的标签，从而获取对应标签的值，易于分离。 Html代码： <a href="javascript:;" @click="getCity($event)">北京</a> Js代码： getCity:function(event){ console.log(event.target.innerHTML); } 方法2：vue的ref和$refs方法（在Js中test不知道如何分离多...
Vue解析后端传来的带有文字和html代码的数据
weixin_37227218的博客
05-04 6109
产生原因 最近在毕设过程中学习了Vue，遇到一种情况是在前端解析后端传来的带有文字和图片的文章。考虑了很多种方法，最后选择直接在MySQL数据库中存储文字+html代码的形式。但是写好之后发现前端直接将html代码以文字形式展示，未进行解析。 解决方式 添加v-html属性，文字中的html代码部分，将被解析并显示对应代码。 参考文章 Vue 将后台传过来的 带html字段的字符串 转换为 HT...
VUE中将HTML格式转换为纯文本
XIE_CHAO的博客
04-19 4582
js中代码： methods:{ ToText(HTML) { var input = HTML; return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replac...
vue指令 v-text和v-html
玉安_ZhangDe的博客
07-04 687
语法:v-text="vue数据变量"v-html="vue数据变量"注意: 会覆盖插值表达式
Vue学习笔记
qq_42223973的博客
03-06 1376
Vue入门笔记
vue 入门，v-model数据绑定
05-03
本篇文章将深入探讨Vue的核心概念之一——`v-model`数据绑定，帮助初学者快速入门。 `v-model`是Vue中的一个指令，用于实现双向数据绑定，它使得视图（View）与模型（Model）之间的数据同步变得简单。这种机制让...
通过一系列vue-demo入门vue2
最新发布
04-18
"通过一系列vue-demo入门vue2" 的学习目标是掌握Vue 2.x的基础知识和核心概念，通过实际的示例项目来加深理解。 Vue 2.x 主要知识点包括： 1. **安装与初始化**：Vue可以通过npm或CDN引入。使用`vue-cli`工具可以...
快速入门Vue
11-30
【Vue.js快速入门】 Vue.js，简称为Vue，是一个渐进式前端框架，设计思想是自底向上增量开发。它的核心库专注于视图层，学习曲线平缓，可轻松与其他库或现有项目集成。Vue.js的目标是通过简洁的API实现响应式数据...
Vue快速入门.docx
06-20
Vue的指令如`v-text`、`v-html`用于文本和HTML内容的绑定，`v-if`、`v-else`、`v-show`控制元素的显示与隐藏，`v-for`用于遍历数组或对象，`v-on`和`v-bind`则分别用于事件监听和属性绑定。此外，Vue还支持定义...
Vue入门到精通，合适快速入门
12-31
Vue.js 是一个流行的轻量级前端框架，旨在简化Web开发，免去直接操作DOM的复杂性。它基于MVVM模式，实现了数据...通过掌握JSON数据交换、Vue实例的创建、指令的使用以及生命周期的理解，你可以逐步从Vue入门走向精通。
Vue指令——v-html
quietbxj的博客
08-03 1595
Vue指令是指v-开头的一系列指令，v-html指令的作用： 设置元素的innerHTML。 内容中包含有html结构会被解析成标签。 v-text指令只会解析成文本。 解析文本需要v-text，解析html结构用v-html。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
Vue知识整理，让你快速入门Vue.js：03_2.本地应用：v-text指令、插值表达式、单引号和双引号的使用
鲁迷那的专栏—坚持实践后再写出来！
03-21 1728
目录 一、v-text指令介绍 二、插值表达式 支持写表达式、单引号和双引号的使用 三、实例代码测试 1、v-text指令使用 （1）实例代码 （2）效果展示 2、插值表达式_部分替换 （1）实例代码 （2）效果展示 3、v-text指令结合表达式_单双引号 （1）实例代码 （2）效果展示 四、内容-总结 上篇文章我们介绍了这章所学习的内容，这一节我们学习第一个指令：......
vue-内置指令
qq_52135740的博客
07-27 367
内置指令 v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会 <div id="root"> <div>你好，{{name}}</div> <div v-text="name"></div> <div v-text="str"></div> </div> </body> <scrip
vue 获取v-html渲染出来的元素
weixin_30361641的博客
01-23 2776
<div class="father" @click="handleHtml($event)"> <div class="son" v-html="demoData"/> </div><script>　　handleHtml($event){　　　　console.log($event.target)　　}</script&gt...
Vue（v-text和v-html同与异）
Mr顺
11-08 1244
v-text和v-html同与异 v-text 重点：作用设置文本 1.v-text指令的作用是：设置标签的内容(textContentt) 2. 默认写法会替换全部内容，使用差值表达式{{}} ,可以替换指定内容 3.内部支持写表达式 v-html 重点：解析a标签 1.v-html指令的作用是：设置元素的 innerHTML 2 .内容中有html结构会被解析为标签 3.v-text指令无论内容是什么，只会解析为文本 4.解析文本使用v-text，需要解析html 结构使用 v-html <!DO
vue学习路(一)：常用指令v-text，v-html，v-bind，v-if，v-on
qq_44860114的博客
11-19 482
什么是vue vue是一款渐进式JavaScript框架，渐进式是指由浅到深，由简单到复杂的使用vue框架。 vue的优点 体积更小：压缩后的vue.js的体积只有33k。 运行效率更高：vue.js基于虚拟DOM操作，大幅度提高了DOM的操作渲染效率。 双向数据绑定：开发者不需要再进行DOM操作，只需要操作数据包。 生态丰富，学习成本低。 vue的基本代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch
v-text的用法
热门推荐
yycnf的博客
08-31 2万+
v-text指令 用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题 （如果数据中有HTML标签会将html标签一并输出 ） 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值 <div id="app"> <!-- 注意:在指令中不要写插值语法 直接写对应的变量名称 在 v-text 中 赋值的时候不要在写 插值语法 一般属性中不加 {{}} 直接写 对应 的数据名 --&
v-html的用法
TanMengyi的博客
03-19 4607
预期：string 详细： 更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。 在单文件组件里，scoped 的样式不会应用在 v-h...
v-text和v-html
弱智de克星
11-08 1万+
v-text和{{}}一样 v-text不解释标签，v-html解释标签 解释html标签可能导致xss攻击，不要使用用户提供的内容插值 <html> <head> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p>{{m
v-show字体变红
08-17
- *1* *2* [vue.js入门（1）——vue.js核心思想和基础操作(v-text,v-html,v-bind,v-on,v-for,v-show,v-if)](https://blog.csdn.net/dkr380205984/article/details/79310453)[target="_blank" data-report-click={...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值