在vue中把含有html标签转为html渲染页面的实例

在标签内部添加v-html指令即可

使用pug的写法：

这个content表示的是一个含标签的变量

输入content为：<p>我是p标签</p>

输出结果是：我是p标签

普通用户一样：

同上理

加v-html就行了

以上这篇在vue中把含有html标签转为html渲染页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE页面中加载外部HTML的示例代码

    VUE页面中加载外部HTML的示例代码

    前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的. 所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果. 不同以往的IFRAME标签,那种方式比较Low,另外有其他的一些BUG. 本文思路是把HTML请求以来,以v-html的形式加载到页面内部.注册全局组件[v-html-panel] 1.HtmlPanel.vue文件 <template> <div> <mu-circular-progress :

  • Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

    原始 HTML(Raw HTML) 双花括号语法,会将数据中的 HTML 转为纯文本后再进行插值.为了输出真正的 HTML,你需要使用 v-html 指令: <p>使用双花括号语法:{{ rawHtml }}</p> <p>使用 v-html 指令:<span v-html="rawHtml"></span></p> 使用双花括号语法:<span style="color: red">

  • 详解三种方式解决vue中v-html元素中标签样式

    Vue为v-html中标签添加CSS样式 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time">{{news.datetime}}</p> <div class="con" v-html=&qu

  • vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能.分享给大家供大家参考,具体如下: 1.首先通过json.php把数据库给输出为json格式的数据 [ { "id":1, "resname":"百度", "resimg":"http://www.baidu.com/1.jpg", "resint":"2018-1-18", "re

  • VUE渲染后端返回含有script标签的html字符串示例

    在接入支付宝支付模块的时候,支支返回的是一个form串,细看一下还有一个script标签,如何将其渲染出来给大家分享一下经验.注意点:不能在当前页面追加任何元素例如原生js:innerHtml.appendChiled等等:Vue原生v-html也不可以因为其只能渲染html标签,script不能够识别. 需要重新创建一个空白Vue组件,用router进行传参,传参方式(新窗口打开) let routeData = this.$router.resolve({ path: 'Recharge',

  • 在vue中把含有html标签转为html渲染页面的实例

    在vue中把含有html标签转为html渲染页面的实例

    在标签内部添加v-html指令即可 使用pug的写法: 这个content表示的是一个含标签的变量 输入content为:<p>我是p标签</p> 输出结果是:我是p标签 普通用户一样: 同上理 加v-html就行了 以上这篇在vue中把含有html标签转为html渲染页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • vue中使用h5 video标签实现弹窗播放本地视频的方法

    目录 1.弹窗的打开关闭 2. 本地视频资源路径的引入 3. 视频播放完毕自动关闭弹窗 4. 视频在弹窗中自适应大小 参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入的visible值: // 父组件中引用子组件 <video-modal :visible.sync="showVideoModal"> // 子组件中 <

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

  • vue中手机号,邮箱正则验证以及60s发送验证码的实例

    今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中. <div> <p class="fl"> <input name="phone" type="number" placeholder="手机号" v-model="phone"/> <button type="button"

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • Vue中对拿到的数据进行A-Z排序的实例

    最近在做一个音乐app练手项目,拿到的数据是杂乱的,又不想跟视频那样重新构造数据,就自己百度使用简便的方法排序,下面说一下 我拿到的数据是这样的,我想让他按照A-Z顺序排列 1.对于数组的操作,官网有例子,在这里我们根据官网使用计算属性来重新排列. computed:{ sortList(){ return this.singers.sort((a, b) => { return a['Findex'].localeCompare(b['Findex']) }) } }, 然后 使用v-for

  • vue.js,ajax渲染页面的实例

    关于上次说的用vue.js,zepto,node.js,webpack等技术重构CNode.这是一个比较入门的项目,一般你学完vue就可以上手了,CNode网站有公开的API所以你可以获取这个网站的所有数据接口,然后渲染到页面上,用CSS等加工一下就可以了.起初,我一直感觉好难好难好难,虽然说不出难在哪里,就感觉好难好难好难.让我细说,不就是用ajax获取数据,然后传到组件上渲染吗,再模仿着写样式不就好了吗.是不难啊,可是为什么我心里天然觉得很难呢? CNode是给了我们数据接口,ajax也就那

  • JavaScript检测字符串中是否含有html标签实现方法

    功能代码 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlStr) {     var  reg = /<[^>]+>/g;     return reg.test(htmlStr); } demo script: 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlSt

  • Vue中请求本地JSON文件并返回数据的方法实例

    Vue中请求本地JSON文件并返回数据的方法实例

    目录 1.目录结构 2.检查一下自己是否安装了 json-server(以下截图代表安装了) 3.安装完成以后我们就可以运行自己的json文件了 4.看看浏览器里的数据呈现效果吧 5.为了保险起见,我还特地去 postman 上测试了一下(可以省略这步) 6.现在我们可以编写代码发送请求来获取数据啦 7.在控制台就可以看到我们数据请求回来了 总结 1.目录结构 直接在根目录下创建自己的JSON文件,在此我的JSON文件名为data.json 以下是我的JSON文件内容(此处是参照的黑马程序员的v

随机推荐