我是 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
}
})
最佳答案
您应该使用v-html
。使用此选项时要小心,因为如果“c”、“d”、“e”是用户输入,则可能会使您的应用程序遭受 XSS 攻击:
<div id="app">
<div v-html="pickedValue"></div>
<picker v-model="pickedValue"></picker>
</div>
关于javascript - 如何从该数组 Vue JS 显示 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61168926/