在 VueJs 中将元素从代码隐藏渲染到 v-html

Question

如何从代码隐藏中获取值和 html 以有效显示？

例子：

html: <div id="app" v-html="html"></div>

js: new Vue({
      el: '#app',
      data: {
      html: '<h1>Hello {{text}}</h1>',
      text: 'world'
      }
    })

https://jsfiddle.net/Lct8uz4o/214/

尝试使用 v-text、v-html、{{..}}、{{{..}}}，但没有任何效果。

这只是一个例子，我必须用不同的 html 语法显示各种 div 元素，每个元素都包含一个要显示的值。你能帮忙吗？

以下是实际问题中的一段代码：

<tbody>
  <tr v-if="!isLoading" v-for="(f, index) in formatted">
    <td :class="c.ClassName" v-for="(c, index) in columnsDisplay" v-html="c.Description">
    </td>
  </tr>
</tbody>

columnsDisplay.push( 
{
   FieldName: "StateCode",
   ClassName: "tracking-state",
   Description: "{{f.StateCode}}"
},
{
   FieldName: "EnrollmentDate",
   ClassName: "tracking-enrolled",
   Description: "<span>{{f.EnrollmentDate}}</span><span class='tracking-cell-subtitle'> {{ f.TimeSinceEnrollment }}</span>"
},
{
   FieldName: "LastActivity",
   ClassName: "tracking-activity",
   Description: "<span>{{f.LastActivity}}</span><span class='tracking-cell-subtitle'>{{f.TimeSinceLastActivity}}</span></td>"
});

Answer 1

考虑computed property：

new Vue({
  el: '#app',
  data: {
    text: 'world'
  },
  computed: {
  	html: function() {
    	return `<h1>Hello ${ this.text }</h1>`;
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app" v-html="html">
</div>

我找不到表明最佳做法的来源，所以也许您也可以使用 templates，或者完全使用其他东西！