这篇博客探讨了在Vue中如何处理从服务端获取的HTML字符串，并在其上添加Vue指令。通过模板语法、v-html指令、自定义render函数、异步组件以及使用$forceUpdate重绘DOM等方式，提出了实现需求的多种解决方案。建议尽量避免传入HTML字符串，而是仅传递数据，以保持前后端职责分离。
从服务端拿来一段类似如下代码(字符串)
<p class="iwantyou">我需要你</p>
<p class="iwantyou">我需要你</p>
<p class="pass">我不需要你</p>
我希望可以在 class="iwantyou" 的dom元素上 添加 v-bind:soul＝'myheart',
期望变成如下：
<p class="iwantyou" v-bind:soul="myheart">{{myheart}}</p>
<p class="iwantyou" v-bind:soul="myheart">{{myheart}}</p>
<p class="pass">我不需要你</p>
--------
以上
可以直接这样写啊~
模板语法(vue文档)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<p v-bind:soul="count">{{count}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
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
进行重绘。
但是前后端分离最好要彻底，建议只传数据到前端。
扫一扫
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
