Question

我有一个里面有html的变量。这是我的所见即所得编辑。

data () {
  return {
     HTMLtext: "<p style="text-align: center;"><b>Hospital</b></p><p> 
       </p><p style="text-align: center;"> <b>Physician</b></p>
       <p></p><p style="text-align: center;"> City <b>New York</b>",
     Place: "London"
   }
 }

现在，我想在某些地方更改此HTMLtext变量。例如，我有一个名为place的变量：

Place: "London"

我想将<b>New York</b>替换为Place变量<b>London</b>

我该怎么办？什么是最好的方法？一般都安全吗？这是一个好习惯吗？

Answer 1

如果您将HTMLtext设为computed，则可以根据变量撰写文本。 Template strings是将变量插入字符串的好方法。

这是我建议的一个例子。我不知道这是否适用于您的情况，因为我不知道HTMLtext的来源，或者您如何知道纽约将被替换。

new Vue({
  el: '#app',
  data: {
    place: 'New York'
  },
  computed: {
    htmlText() {
      return `<p style="text-align: center;"><b>Hospital</b></p><p> 
       </p><p style="text-align: center;"> <b>Physician</b></p>
       <p></p><p style="text-align: center;"> City <b>${this.place}</b>`;
    }
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  Place: <input v-model="place">
  <div v-html="htmlText"></div>
</div>

vuejs - 在变量中“编辑”html

1 个答案: