如何用Vue在html文件中写入html

最新推荐文章于 2024-06-14 13:50:53 发布
最新推荐文章于 2024-06-14 13:50:53 发布
阅读量2.8k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruienger/article/details/109557468
版权

引言

有时，在从后台拿到富文本的时候，这些文本都带有标签，直接把它作为文本写入会把标签也写进去。
那么，可以通过html标签内的v-html来解决

解决

有一段文字text : '<p>奶油草莓~~~~~~真不错</p>'
如果使用 {{ text }}
显示结果为

<p>奶油草莓~~~~~~真不错</p>

使用<p v-html="text"></p>
显示结果为

奶油草莓~~~~~~真不错

done

sk1tlz
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目编写html,从头搭建、编写一个VUE项目
weixin_33593741的博客
06-15 2994
一、创建VUE项目1、新建一个vue项目进入工作目录，新建一个vue项目：vue init webpack 项目名vue init webpack vue-project-demoimage.png说明：Vue build ==> 打包方式，回车即可；Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；Use ESLint ...
vue在html中写style,webpack 打包vue文件的时候 vue文件中的style样式不生效
weixin_39923623的博客
06-09 936
package.json代码{"name": "coment","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","devD...
vue怎么写入html模板,vue如何引用独立的html模板文件？
weixin_33764069的博客
06-03 1179
刚接触vue，现在在写一个项目，想独立出html模板文件。看教程，template都是用+拼的字符串，感觉好糟糕。之后查到vue可以从html文件里根据id读取标签中的内容，并以此作为模板。html：我的更多js:varHeader=Vue.extend({template:'#project-header-template'});然而目前都是写到入口文件里的。因为模板比较多，想在开发过程...
vue 项目中引入 本地html文件
最新发布
DivBOxp的博客
06-14 1155
vue 项目中引入 本地html文件
vue 动态添加 HTML元素
06-13
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
vue项目可以写html结构吗,Vue.js系列之项目结构说明(2)
weixin_42538752的博客
06-19 496
说明：我们项目现在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。本文是一系列文章，在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。简单介绍目录结构build目录是一些webpack...
vue 组入html,Vue 01-基础入门-引入到Html中
weixin_35054319的博客
06-17 327
一、传统开发方式引入vue.jsVue{{ message }}var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})二、vue指令指令是带有v-表达式，当表达式改变后将响应式的影响所作用的DOM。v-once：在标签里添加这个指令后，标签包裹的变量只会变一次。{{message}}v-html：使用个指令后，指定的变量将会在输出...
用vue打开服务端的html文件,详解如何使用Vue2做服务端渲染
weixin_35715490的博客
06-15 736
vue更新到2.0之后，作者就宣告不再对vue-resource更新，并且vue-resource不支持SSR，所以我推荐使用axios,在服务端和客户端可以同时使用。vue2使用了虚拟DOM,因此对浏览器环境和服务端环境要分开渲染,要创建两个对应的入口文件。浏览器入口文件 client-entry.js使用 $mount 直接挂载服务端入口文件 server-entry使用vue的SSR功能直接...
.vue文件怎么嵌入html,vue-cli2 组件内嵌HTML文件
weixin_36024106的博客
06-17 2230
(如有错误，欢迎指正~~)在Vue要使用文件上传，找到一个bootstrap编写好的demo，打算直接用，嵌入vue中。demo主要使用jquery和webuploader，jquery和webuploader引用是使用script引入的。要兼容现在的Vue项目。实验一：打算在Vue的组件里使用script引入demo里同样引入的文件，发现文件没有被引用进来。实验二：打算将script引入文件的语...
vue结合html实时截取textarea文本
07-12
在提供的`project-demo`压缩包中，应该包含了这个示例的完整代码结构，包括Vue组件文件和相关的HTML模板。解压后，你可以运行项目（通常通过`npm run serve`命令），并在浏览器中查看效果。 这个简单的Vue与HTML...
js 获取vue组件html_vue页面中嵌入html vue组件中怎么引入html文件？
weixin_39949473的博客
12-19 6133
如何利用Vue.js库中的v-html指令添加html元素vue组件中怎么引入html文件？HtmlPanel.vue文件 export default{ // 使用时请使用 :url.sync=""传值 props: { url: { required: true } }, data () { return { loading: false, html: '' } }, watch: { url...
Vue中插入HTML代码的方法
12-03
我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做？ 一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` <p> My name is Pjee <p v-html='text'></p> </p> 注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 二、渲染函数 渲染函数：这是通过对VNode（虚拟DOM）的操作来生成 text()
vue动态插入HTML(dom)
weixin_44484603的博客
03-17 4686
vue动态插入HTML(dom)
如何将HTML字符转换为DOM节点并动态添加到文档中
玄魂工作室
08-18 1366
将HTML字符转换为DOM节点并动态添加到文档中将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。字符串转换为DOM节点本身并不难，本篇文章主要涉及两个...
Vue中嵌入原生HTML页面
weixin_38982591的博客
01-30 2928
但是vue目前暂时没找到有类似功能相关文档，所以我采用iframe嵌套的方式。在mounted生命周期中去绑定具体Iframe的页面。在mounted中加监听事件，并配上处理监听对象的方法。在data中定义一个iframe绑定的页面的对象。在method中定义方法，用于处理监听的事件。在html中接收vue端传过来的值。发送信息到iframe页面。html页面中的代码。
vue 中动态添加html元素并绑定点击事件
laoyaoshilaoyao的博客
07-14 4874
vue 中动态添加html元素并绑定点击事件
vue 打开html流_vue 动态插入渲染html
weixin_35711352的博客
12-29 301
old wordimport Vuefrom "vue";exportdefault{name:"HelloWorld",data() {var check = (rule, value, callback) =>{this.change();};return{form: {newHtml:'',newTemplate: `1`},rule: {newTemplate: [{ validator:...
vue 动态添加html属性,vue.set如何添加属性？
weixin_34352565的博客
06-09 1351
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在...
vue项目中加入html,【Vue项目】在Vue文件中动态插入HTML模板，怎么操作？
weixin_39608613的博客
05-31 3802
1.问题重现：在实际开发中通过点击事件触发弹窗，动态展示模板内容。项目中有已经写好的html结构，不想在vue中重新写一套。2.尝试：最开始想到的办法是插值表达式，结果一用就错，插值表达式会将写好的html模板解释成字符串，并不会以html结构去展示例如：visible="basinModal">// 想要展示的模板内容{{ basinTemplate }}然后希望通过设置innerHTML...
vue框架怎么讲数据写入js文件
06-06
如果你想在Vue框架中将数据写入到JavaScript文件中，你可以使用Vue的生命周期函数和Vue的数据绑定。 1. 在Vue实例中定义一个data对象，它包含你想要写入到JavaScript文件中的数据。 2. 在Vue的生命周期函数created()中，使用JavaScript的XMLHttpRequest对象（或者jQuery的$.ajax方法）发送一个POST请求，将data对象转换为JSON格式，然后将其发送到服务器端。 3. 服务器端接收到POST请求后，将JSON数据写入到一个JavaScript文件中，并保存到服务器端的指定目录中。 4. 在Vue的模板文件中，使用Vue的数据绑定语法将JavaScript文件中的数据绑定到模板中显示出来。 下面是一个简单的示例代码： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, created() { const data = { message: 'Hello World' }; const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/data', true); xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); this.message = response.message; } }; xhr.send(JSON.stringify(data)); } } </script> ``` 在这个示例中，我们在Vue的data对象中定义了一个message属性，然后在created()生命周期函数中使用XMLHttpRequest对象将数据发送到服务器端。服务器端接收到数据后，将其写入到一个JavaScript文件中，并返回一个JSON响应。在Vue的模板中，我们使用数据绑定语法将message属性绑定到模板中显示出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值