vue - v-html的使用

最新推荐文章于 2024-04-11 23:15:35 发布
VIP文章 最新推荐文章于 2024-04-11 23:15:35 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： vue 文章标签： html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiaoFengJi/article/details/119929820
版权

  近期在写需求的时候get到一个新的知识点，那就是使用 v-html 编译后台返回的富文本内容，使它可以正常显示到页面中。大家可能不知道，在富文本编辑的内容，最终都会变成了 标签+内容 的形式来保存的，所以在其它地方使用到这一内容的时候，它是以字符串的形式传递过来的，此时我们就需要用到 v-html 指令来将标签编译。

一、举个例子

  这里举例是使用jsp实现了后台管理系统富文本编辑器，然后需要将在富文本编辑器中的内容返回给前端在移动端进行显示，如下图：
在这里插入图片描述

  后台接口返回的数据是这样的：以属性值的方式返回，这个值返回的是字符串，看这些内容大家会发现字符串中是由 标签+内容 组成的。

data:{
   
    content:'<span>图文详情图文详</span><img
最低0.47元/天 解锁文章
紫菀檀ss
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue v-html 参数,vue基础知识详解
weixin_30424427的博客
07-02 2994
步骤：准备一个被vue挂载的容器divnew vue实例对象1.Vue 实例的作用范围？vue会管理el命中的元素及其后代内部的后代元素，注意是内部的可以看出vue 作用范围仅限于el 命中的元素的内部2.是否可以选择其他选择器？可以，但是建议选择id选择器默认选择的是id选择器。那是否可以是其他的选择器呢？可以看得出不管是id选择器还是class选择器或者是标签选择器都是没有发生变化的，所以它可...
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
附加值 vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append' ) Vue . use ( VueAppend ) 直接包含 您也可以直接在[removed]标记中添加它。 它将自动安装自身，并添加一个全局VueAppend 。 事件 附加的 如果html append，脚本已下载且没有抛出错误，则将触发appended事件。 附加器 如果在添加html时抛出错误，则将触发a
如何动态渲染HTML内容？用v-html！
最新发布
你若盛开，清风自来
04-11 1139
本文将介绍Vue中的v-html指令，以及它在动态渲染HTML内容中的应用。Vue中的v-html指令是动态渲染HTML内容的关键，但使用时需要注意安全性。了解v-html的使用方法和注意事项对于Vue开发者来说至关重要。
Vue v-html用法
liubangbo的专栏
06-18 1万+
如果我们从服务器端获取到了HTML字符串，用浏览器显示出来。在Vue框架下，可以用v-html指令来做。例如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue demo</title> </head> <body> <script src="./vue.js"></script> <
vue+iview 使用v-html属性显示html代码并调用方法
weixin_44671162的博客
02-24 3165
使用v-html属性显示html代码并调用方法项目架构使用window对象的原因场景1这是定义方法/变量这是赋空方法/变量不使用window对象，使用h5中的标签属性html部分方法区v-html代码 项目架构 vue +iview 使用window对象的原因 需要自己拼接HTML代码 即使用 v-html 属性 在自己拼装的html代码中添加方法 使用的是 οnclick="changeSelBtn(’ + a + ',2)" 这个方法不能直接调用到vue中的 methods 中的方法 暂时定义了wi
Vue中v-html用法以及指令汇总
m0_71088505的博客
07-17 1019
cookie安全
vue的v-html使用
诚的博客
07-27 1042
使用vue忙碌的开发了几个月的项目，最近终于得以喘息。现在把开发中的问题，总结一下。方便以后观看。 1.vue项目中何时使用v-html标签绑定数据？ 当你的数据中有html元素标签，并且希望按照元素标签的样式显示的时候，这个时候就需要使用v-html来绑定数据。 例子： js代码部分： export default { data () { myMess: '<h1> Hello World!</h1>' } } html代码部分：...
vue指令v-html使用过滤器filters功能实例
10-16
在本篇文章里我们给大家整理的是关于vue指令v-html使用过滤器filters功能的实例内容，需要的朋友们学习下。
vue-intersect:Vue组件，用于将交叉观察器添加到Vue组件或HTML元素
05-01
Vue组件，用于将交叉观察器添加到Vue组件或HTML元素。 表中的内容 介绍 是一个了不起的API，可让您观察一个或多个HTMLElement进入或离开视口的时间。 当元素进入视口时，此API有许多用例，例如无限滚动，延迟加载或...
VUE解决 v-html不能触发点击事件的问题
10-16
今天小编就为大家分享一篇VUE解决 v-html不能触发点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现在v-html的html字符串中绑定事件
10-16
今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli...
vue-input-contenteditable:您期望`具有相同的功能`，但位于`contenteditable` Vue组件中
05-14
下面是单个文件组件中使用的组件示例。 导入后，请确保将其添加到您的components属性中，然后它将在您的模板中可用。 <input-contenteditable v-model="myModel" _is="p" :placeholder="myPlaceHolder" :...
vue-native-color-picker:使用本机输入类型颜色的Vue拾色器
04-30
使用本机HTML元素轻型颜色选择器。 安装 npm install vue-native-color-picker 进口 全球范围内： import InputColorPicker from "./vue-input-color-picker"; Vue.use(InputColorPicker); 或本地： import ...
vue-masked-input：Vue.js的蒙版输入组件
02-06
将其与v-model一起使用，就像带有mask属性的本地html输入一样： 以下格式字符定义了掩码的可编辑部分（请参阅 ）： 1数字 a -信 A字母，输入时强制大写 * -字母数字 # -字母数字，输入时强制为大写 + -任何字符 ...
vue-carousel:Vue Carousel npm软件包。 玩转并查看示例
05-08
Vue轮播 安装 安装npm软件包 npm install @samwood/vue-carousel 将VueCarousel导入Vue组件脚本 // my-component.vue < MyComponent>... < script > import VueCarousel from ' @samwood/vue-carousel ' ;...
Vue中v-html的用法
热门推荐
chen_ac的博客
06-14 1万+
在Vue语法中，通过{{}}可以输出文本变量，当时它并不能实现在一个标签语句加入一个新的标签语句，这时候需要用到v-html属性来完成操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist
VUE 在通过V-HTML 渲染产生的虚拟DOM实现调用函数
weixin_42758129的博客
02-26 1435
##VUE 在通过V-html 渲染产生的虚拟DOM中实现调用函数，绑定事件 问题：渲染的Html 代码如下：需要通过computed函数 计算add的值 作为该div的placeholder属性 htmltest=“<div id="meetting" contenteditable="true" :placeholder="add(0)" ></div>” 解决方法：将需要渲染的html 包裹在一个div当中，指定该div的id，并将该div挂载在一个新的VUE的实例中；
【vue】v-html
richest_qi的博客
08-09 197
v-html，会更新元素的innerHTML属性。 <template> <p v-html="htmlFragment"></p> </template> <script> const data = { htmlFragment:"<span style='color:red'>hello world</span>" } export default { data(){ retur
vue-konva v-rect使用
07-16
### 回答1： vue-konva是一个基于Vue.js的Konva库的封装，它提供了一系列的Vue组件，能够轻松地在Vue应用中创建和操作Konva舞台和图形。 v-rect是vue-konva中的一个矩形组件。通过使用v-rect组件，我们可以在Konva舞台上创建一个矩形，并设置其属性和事件。 首先，我们需要在Vue组件中引入v-rect组件。在template中，使用<template v-rect>标签来创建一个矩形。我们使用v-bind指令来设置矩形的属性，例如宽度、高度、位置等等。同时，我们也可以使用v-on指令来监听矩形的事件，例如点击、拖动等等。 v-rect的属性有很多，其中一些常用的属性包括width（宽度）、height（高度）、x（x坐标）、y（y坐标）、fill（填充颜色）、stroke（边框颜色）等等。我们可以根据需求来设置这些属性的值。例如，设置矩形的宽度为100px，高度为50px，填充颜色为红色，可以这样写：<template v-rect:width="100" v-rect:height="50" v-rect:fill="red"> 同时，v-rect也支持一些事件，如点击事件（click）、拖动事件（dragstart、dragmove、dragend）等等。我们可以使用v-on指令来监听这些事件，然后在Vue组件中定义相应的方法来处理这些事件。例如，监听矩形的点击事件，可以这样写：<template v-rect v-on:click="handleClick">，然后在Vue组件中定义handleClick方法来处理点击事件。 综上所述，v-rect是vue-konva中一个非常有用的组件，可以轻松地创建、设置和操作Konva舞台上的矩形。通过设置属性和监听事件，我们可以根据需求来定制矩形的外观和行为。 ### 回答2： Vue-Konva 是一个基于 Vue.js 的 Konva Canvas 库，用于创建可交互的图形和动画。v-rect 是 Vue-Konva 提供的一个指令，用于在画布上创建矩形。 使用 v-rect 指令创建矩形非常简单。首先，你需要在 Vue 组件中引入 Vue-Konva 库，然后使用 v-rect 指令在画布上创建矩形的元素。例如，你可以创建一个矩形，设置其位置、大小、颜色等属性。 ```html <template> <v-stage :config="stageConfig"> <v-layer> <v-rect v-for="(rect, index) in rectangles" :key="index" :config="rect.config" /> </v-layer> </v-stage> </template> <script> import { Stage, Layer, Rect } from "vue-konva"; export default { components: { VStage: Stage, VLayer: Layer, VRect: Rect, }, data() { return { stageConfig: { width: window.innerWidth, height: window.innerHeight, }, rectangles: [ { config: { x: 100, y: 100, width: 200, height: 100, fill: "red", }, }, { config: { x: 300, y: 200, width: 150, height: 150, fill: "blue", }, }, ], }; }, }; </script> ``` 在上面的代码中，我们创建了一个 Vue 组件，其中包含了 VStage、VLayer 和 VRect 组件。通过给 VStage 设置 config 属性，我们可以定义画布的大小。然后，在 VLayer 中，通过遍历 rectangles 数组并使用 v-rect 指令，我们可以在画布上创建多个矩形。每个矩形都有一个 config 对象，用于定义其位置、大小和颜色等属性。 通过这种方式，我们可以在 Vue.js 中轻松地创建和管理 Konva Canvas 上的矩形，并对其进行各种操作和交互。无论是改变矩形的位置、大小，还是响应用户的交互事件，v-rect 都为我们提供了便捷的方法。 ### 回答3： Vue-Konva是一个基于Vue.js的HTML5 Canvas库，用于创建和操作可视化图形。 v-rect是Vue-Konva中的一个组件，用于绘制矩形形状。它可以接受一些属性来定义矩形的样式和位置。以下是一些v-rect支持的属性： - x：矩形左上角的x坐标。 - y：矩形左上角的y坐标。 - width：矩形的宽度。 - height：矩形的高度。 - fill：矩形的填充颜色。 - stroke：矩形的描边颜色。 - strokeWidth：矩形的描边宽度。 例如，我们可以使用v-rect创建一个红色的矩形： ``` <template> <v-stage :config="stageSize"> <v-layer> <v-rect :config="rectConfig" /> </v-layer> </v-stage> </template> <script> export default { data() { return { stageSize: { width: 400, height: 400 }, rectConfig: { x: 100, y: 100, width: 200, height: 100, fill: 'red' } } } } </script> ``` 在上面的示例中，我们使用v-stage和v-layer组件来创建一个舞台和图层。然后，我们在图层中使用v-rect组件来创建矩形。通过设置rectConfig对象的属性，我们定义了矩形的位置、大小和颜色。 以上就是关于Vue-Konva的v-rect的使用介绍。希望能够对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值