如何从这个数组 Vue JS 中显示 HTML答案

【问题标题】：How to show HTML from this array Vue JS如何从这个数组 Vue JS 中显示 HTML
【发布时间】：2020-07-24 21:25:30
【问题描述】：

我是 Vue JS 的新手，我正在尝试使用这个数组传递一个 HTML 表，我有一个下拉列表，我在其中选择我想要的选项，然后它会显示它，但我不知道怎么能我把 HTML 放在那里，当我这样做时，它会打印代码。非常感谢您的帮助。

这是 HTML 文件：

        <div id="app">
            <div>
              {{pickedValue}}
            </div>
            <picker v-model="pickedValue"></picker>
        </div>

这是 JS 文件，我想在列表中放置一个 HTML 表格：["c","d","e"]

  console.clear()

Vue.component("picker",{
  props:["value"],
  data(){
    return {
      list:["c","d","e"],
      currentValue: this.value,
      selectedValue: ""
    }
  },
  template:`
    <div>
      <select @change="currentValue = $event.target.value" v-model="selectedValue">
          <option value="">Select</option>
          <option v-for="item in list" :value="item" :key="item">{{item}}</option>
      </select>
    </div>
  `,
  watch:{
    currentValue(newValue){
      if (!this.list.includes(newValue))
        this.selectedValue = "" 

      this.$emit('input', newValue)
    }
  }
})

new Vue({
  el:"#app",
  data:{
    pickedValue: null
  }
})

【问题讨论】：

“但我不知道如何将 HTML 放在那里”你能用一个例子来解释这个，比如你想展示什么以及假设如何发生使用下拉菜单？
当我从下拉列表中选择一个值时，我希望它显示一个 HTML 表格，这个表格应该在 list:["c","d","e"] 里面而不是这个字母，但是当我这样做时，它会显示 HTML 代码，而不是表格。也许这是不可能的，或者我做错了什么。
也许您可以仅将表格保留在父模板中，并使用v-if 根据选择的选项显示它们
究竟是什么 HTML 以及它的来源？ v-html 可以，但不安全。请解释一下你的情况。

标签： javascript html arrays vue.js dropdown

【解决方案1】：

您应该改用v-html。使用时要小心，因为如果“c”、“d”、“e”是用户输入，它可能会将您的应用程序暴露给 XSS 攻击：

    <div id="app">
        <div v-html="pickedValue"></div>
        <picker v-model="pickedValue"></picker>
    </div>

https://vuejs.org/v2/api/#v-html

【讨论】：