1. 程式人生 > 其它 >後端返回一段字串模板,前端如何解析?

後端返回一段字串模板,前端如何解析?



 可以實現但是安全性會有問題,建議最好是不要這樣來處理,可以考慮處理一下返回的

<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