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

Question

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

<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>


--------
以上

Answer 1

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

你想要这样的需求，事实上有两种解决方案：
一个是提取出后端发过来数据的关键部分，比如在你这里，你可以用正则把class或者是标签内的文本提取出来，然后再进行vue的渲染。又或者是直接让后台发数据，不要再发这种形式的文本了。事实上，按照现在前后端的分工，后端只管数据，渲染全部交给前端来做的。

还有一种解决方案，稍微复杂一点，你需要的不是标准的vue渲染模板，而是自定义的render渲染函数。
具体它的用法，可以在官网找到，就不在这里详细说了。

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