vuejs - “编辑"html 内部变量 [英] vuejs - "editing" html inside variable

问题描述

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

data(){返回 {HTMLtext: "<p style="text-align: center;"><b>Hospital</b></p><p></p><p style="text-align: center;"><b>医师</b></p><p></p><p style="text-align: center;">城市<b>纽约</b>",地点:伦敦"}}

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

地点:伦敦"

我想用 Place 变量替换 New York 到 London代码>

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

解决方案

如果你让 HTMLtext 成为一个 计算，它可以根据变量组成文本.模板字符串 是将变量插入到字符串.

这是我建议的示例.我不知道这是否适用于您的情况，因为我不知道 HTMLtext 来自哪里，或者您如何知道纽约将被替换.

new Vue({el: '#app',数据: {地点:纽约"},计算:{htmlText() {return `<p style="text-align: center;"><b>Hospital</b></p><p></p><p style="text-align: center;"><b>医师</b></p><p></p><p style="text-align: center;">城市<b>${this.place}</b>`;}}});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script><div id="应用程序">地点:<input v-model="place"><div v-html="htmlText"></div>

I've got a variable which has html inside. This is for my wysiwyg editor.

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

Now, I want to change this HTMLtext variable in some places. For example I've got variable called place:

Place: "London"

and I want to replace <b>New York</b> with Place variable into <b>London</b>

What should I do? What is the best approach? Is it generally safe? Is this a good practice?

解决方案

If you make HTMLtext a computed, it can compose the text based on the variables. Template strings are a nice way to interpolate variables into strings.

Here's an example of what I'm suggesting. I don't know if that will work in your circumstance because I don't know where HTMLtext comes from or how you know that New York is in it to be replaced.

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 内部变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！