後端返回一段字串模板,前端如何解析?
阿新 • • 發佈:2022-03-16
可以實現但是安全性會有問題,建議最好是不要這樣來處理,可以考慮處理一下返回的
<template> <div id="app"> <div v-html="template"></div> </div> </template> <script> export default { name: "demo", data(){ return{ template :'', list:{ name:'名稱', arr:[ { text:'1111', status:true }, { text:'2222', status:false}, { text:'3333', status:true }, { text:'4444', status:false} ], }, temp2:"<div>${data.arr.map(item=>{return `<a href='${data.url}'>${item.name}</a>`})}</div>", } }, mounted(){ this.template = this.test(this.list,this.temp) }, methods:{ test(data,temp){ return new Function("data",`return \`${temp}\`;`)(data) } } } </script>
模板用 compile
來實現。 https://cn.vuejs.org/v2/api/#Vue-compile