vue如何加载html字符串_vue如何给html字符串添加指令？

从服务端拿来一段类似如下代码(字符串)

<p class="pass">我不需要你</p>

我希望可以在 class="iwantyou" 的dom元素上添加 v-bind:soul＝'myheart',

期望变成如下：

<p class="iwantyou" v-bind:soul="myheart">{{myheart}}</p>

<p class="pass">我不需要你</p>

--------

以上

可以直接这样写啊~

模板语法(vue文档)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p v-bind:soul="count">{{count}}</p>

</div>

new Vue({

el:'#app',

data:{

count:'myheart'

}

});

</script>

</body>

</html>

渲染为：

<p soul="myheart">myheart</p>

v-html

这个指令只能够添加纯粹的html文本

你想要这样的需求，事实上有两种解决方案：

一个是提取出后端发过来数据的关键部分，比如在你这里，你可以用正则把

class

或者是标签内的文本提取出来，然后再进行

vue

的渲染。又或者是直接让后台发数据，不要再发这种形式的文本了。事实上，按照现在前后端的分工，后端只管数据，渲染全部交给前端来做的。

还有一种解决方案，稍微复杂一点，你需要的不是标准的vue渲染模板，而是自定义的

render

渲染函数。

具体它的用法，可以在官网找到，就不在这里详细说了。

我对

vue

也不是特别熟练，个人观点，仅供参考。

没遇到过这种情况，只是个人猜测。可以试一试用异步组件的方式生成组件，然后把这个组件插入到页面中，data部分可能要处理下

Vue.component('async-example', function (resolve, reject) {

axios.get('xxx').then((template) => {

resolve({

template: template

})

文档地址异步组件(需要手动对照中文文档，中文文档链接锚点有问题

没有遇到过这种场景，只能给你一个建议，给目标dom添加一个属性，就是

v-bind:soul="myheart"

，然后用vue的强制渲染

$forceUpdate

进行重绘。

但是前后端分离最好要彻底，建议只传数据到前端。

vue如何加载html字符串_vue如何给html字符串添加指令？相关推荐

vue动态加载VueI18n实现国际化
vue动态加载VueI18n实现国际化前言编写后端工程编写前端工程前言前一段时间给大家写了一个基于spring boot和iview的前后端分离架构,当时国际化的语言信息是直接在前端直接事先 ...
vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png' ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
vue模拟加载更多功能（数据追加）
使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该 ...
笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 1 data() { 2 return { 3 lo ...
[vue] 第一次加载页面时会触发哪几个钩子？
[vue] 第一次加载页面时会触发哪几个钩子? beforeCreate, created, beforeMount, mounted 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
Vue 页面加载闪现出现{{xxx}}问题
Vue 页面加载闪现出现{{xxx}}问题,猜测应该是犹豫网络延迟或者什么原因导致加载vue.js CSS中 [v-cloak] {display: none; } HTML中 <div v-c ...
render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...

vue如何加载html字符串_vue如何给html字符串添加指令？

vue如何加载html字符串_vue如何给html字符串添加指令？相关推荐

最新文章

热门文章