如何在 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為假時，這不起作用。 我怎樣才能讓它工作？ 我正在尋找一種不需要使用v-else重復<h2>兩次的解決方案。 最好，如果我可以只用 1 <h2>標簽來做到這一點。

謝謝

Answer 1

將v-bind與prop修飾符一起使用。 見文檔。

 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>