javascript - 如何在 v-html 之间切换并在 vue.js 中以纯文本形式插入？

Question

我希望在 v-html 和以纯文本形式插入 vue.js v2 之间切换。到目前为止我有这个

HTML

<div id="app">
  <h2 v-html="html ? text : undefined">{{html ? '' : text}}</h2>
  <button @click="toggle">
    switch
  </button>
</div>

JS

new Vue({
  el: "#app",
  data: {
    text:"Hello<br/>World",
    html:false
  },
  methods: {
    toggle: function(){
        this.html = !this.html;
    }
  }
})

但是这在 html 时不起作用是假的。我怎样才能让它工作？我正在寻找不需要重复的解决方案 <h2>两次使用 v-else .最好是，如果我能用 1 <h2> 做到这一点标签。

谢谢

Answer 1

使用 v-bind 和 prop 修饰符。 see docs .

new Vue({
  el: "#app",
  data: {
    text:"Hello<br/>World",
    html:false
  },
  computed: {
    headingProps() {
      return this.html ? { innerHTML: this.text } : { innerText: this.text } ;
    },
  },
  methods: {
    toggle: function(){
        this.html = !this.html;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <h2 v-bind.prop="headingProps"></h2>
  <button @click="toggle">
    switch
  </button>
</div>