vue文本中的标签不以文本的形式显示

最新推荐文章于 2022-09-15 19:15:40 发布
最新推荐文章于 2022-09-15 19:15:40 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 学习复习_自我总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cheng_dong/article/details/104650233
版权

第一种方法：直接使用v-html可以解决。

第二种方法（比较复杂）：

  1. 先设置标签的ref属性
    在这里插入图片描述
    这里的{{li.mack}}的值是"<span style=\"color: #FFFFFF;background: #AB7FD1;border-color: #AB7FD1\">爆品</span>"
  2. 再在mounted中获取到该元素并显示在页面中
    在这里插入图片描述list[m]是data里面的数据，根据自己的情况而定。
    下面是我的data数据
    在这里插入图片描述这样就显示出来了，如图：
    在这里插入图片描述
竹上晴雪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中，如何实现HTML标签后，修改标签内的文本
weixin_42117463的博客
03-29 2769
在Vue.js中，我们可以使用指令来绑定事件和响应用户交互。在updateText方法中，让span标签变成可编辑状态，并让它获取焦点。这样，在用户双击span标签时，就可以直接在页面上编辑文本了。在saveText方法中，将用户编辑后的文本保存到Vue实例的data中，并让span标签变回不可编辑状态。以上就是在Vue.js项目中实现用户双击一个span标签后，可以修改标签内的文本的方法。本文将讲解如何在Vue.js项目中实现用户双击一个span标签后，可以修改标签内的文本。
vue+showdown展示Markdown 文本
最新发布
weixin_44727080的博客
06-14 312
vue+showdown展示Markdown 文本，资料整理。
Vue 基础
qq_40132294的博客
05-17 2707
1.<span title="xxxx"></span>标签： 当被span标签包裹时，前端将鼠标放在控件上就能显示出其title属性： 2.v-bind: 将数据绑定为属性值；{{truth}}将数据插入展示。可以缩写为： v-xxx开头的叫Vue指令 效果： 3. v-if：条件判断控制，每次都会重新删除和创建元素（开销较大） v-if=true 效果： v-if=fal......
Vue基础知识总结 3：vue常用标签
学Java，找哪吒
07-19 2万+
一、计算属性 1、合并两个字符串 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{fullName}}</div> <script src="../js/vue.js">&.
Vue文件基本所需类型
franktyf的博客
01-03 245
<template> //视图层 <template> <script> //js操作、接口调用 export default { moduleId: "appInfo", name: "appInfo", data() { return { } }, components:{ }, created() { }, mounted() { }, methods: { ...
用v-html解决Vue.js渲染中html标签不被解析的问题
10-20
然而，如果直接将包含HTML标签的字符串绑定到模板中，Vue.js默认会将其作为纯文本处理，不会执行任何HTML解析，导致标签以字符串形式显示。这时，我们就需要使用`v-html`指令来解决这个问题。 `v-html`是Vue.js提供...
初始VuePPT，基本标签
07-28
* v-text 指令：设置标签的文本值（textContent），可以使用差值表达式 {{}} 替换指定的内容。 * v-html 指令：设置元素的 innerHTML，内容中有 HTML 结构会被解析为标签。 * v-on 指令：为元素绑定事件，事件名不...
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
10-18
在Vue.js中，当从后台获取到的数据是以HTML字符串的形式存在时，为了在前端页面上正确地渲染这些HTML内容，我们需要采取特殊的处理方式。这个问题在标题和描述中已经提出，即“Vue.js 中取得后台原生HTML字符串 原样...
vue中调用百度地图实现搜索等功能
01-08
在Vue项目中集成百度地图以实现搜索和相关功能，主要涉及以下几个关键知识点： 1. **引入百度地图API**： 首先，你需要访问百度地图官网（[http://lbsyun.baidu.com/](http://lbsyun.baidu.com/)），在地图开放...
浅析Vue 中的 render 函数
10-15
此外，由于Vue的模板在编译时也会转换成`render`函数的形式，所以除非有特定的需求，一般情况下使用模板语法会更加直观和简洁。不过，对于某些高级用例，如动态组件、自定义渲染逻辑或与第三方库集成时，`render`...
Vue内容不闪烁，不显示{{}}
一眼青苔
04-23 747
这里写自定义目录标题Vue内容不闪烁，不显示{{}}问题形容处理方案： Vue内容不闪烁，不显示{{}} 问题形容 Vue在单页面使用的时候，经常会出现页面加载过程中出现 {{}} 等信息，是因为dom已经渲染了，但是vue还并没有将dom进行编译和重新渲染，因此就需要该命令对未完全渲染完毕的dom进行处理。 v-cloak 处理方案： 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache
vue的基本标签
weixin_46484970的博客
12-14 3326
el：挂载点，设置vue实例挂载管理元素，不能使用HTML标签和body标签 data：数据对象 methods：方法 vue实例的作用范围是：vue会管理el选项命中的元素及其内部的后代元素 vue指令： 1、内容绑定，事件绑定。 v-text：设置文本 v-html：设置元素的innerHTML，会解析标签 v-on基础：为元素绑定事件，绑定方法定义再methods属性中，this关键字可以访问定义在data数据中，可以简写成@ 2、显示切换，属性绑定。 v-show：根据表达值的真假，切换元素的显示与
vue.js获得当前元素的文字信息
besttoby01的博客
11-20 1万+
1.获得当前点击的内容 <li @click="problem1"> 1. <span class="blue">关于公众号使用问题</span> <img src="../img/right.png" alt=""/> </li>当我点击这个li标签的时候，我想要获得span里面的文字，可以使用这个方法： problem1: function(e){
Vue 展示的文本换行 静态文本按格式显示 textarea文本的换行 亲测有效
weixin_42556438的博客
11-01 7857
需求 一个商品管理系统，需要新增一个商品的信息，有一个备注字段，需要做成textarea，在textarea中用户是可以进行换行的。在新增完商品之后在查看详情时，备注字段的显示需要和textarea中的格式一致。 解决方案 1.将字符串的’/n’替换成 使用v-html绑定 <template> <h>备注</h> <div v-html="remar...
Vue 忽略自定义标签名&插件开发&组件数据传递和共享—＞父传子
m0_62168050的博客
09-15 931
Vue 忽略自定义标签名&插件开发&组件数据传递和共享—>父传子
vue实现嵌入到组件中_Vue的嵌入式文本组件
cuk5340的博客
07-28 724
vue实现嵌入到组件中 维斯罗林 (vue-scrollin) vue-scrollin is a Vue component that scrolls through various characters on mount before revealing the correct text. vue-scrollin是Vue组件，可在显示正确的文本之前滚动浏览挂载的各种字符。 View ...
vue.js 实现点击某一标签就能获取当前点击标签的内容
water_Popcorn的博客
05-23 5438
以button为例 html源码： <div id="app"> <button @click="showValue($event)">点我</button> </div> script源码 <script> new Vue({ el:"#app", data:{ ...
vue中设置input标签的文本颜色和placeholder颜色区分
热门推荐
The blog of CSDN in 杨天福
08-20 2万+
在input标签中直接设置color属性，会发现placeholder的颜色也会跟随改变，若要区分，给placeholder增加-webkit-input-placeholder属性 >input{ width: 100%; height: 100%; position:relative; p...
vue-quill-editor 图文粘贴 图片不显示
08-23
因此，解决思路是将复制的图片上传至服务器，然后将服务器返回的图片地址作为img标签插入到富文本编辑器中，这样就可以正确显示图片了。以下是一个解决思路的代码实例供参考： ```javascript mounted() { let ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值