dom - 如何在 vue2 中返回计算的 html？

Question

我尝试根据我想做的变量类型返回html部分：</p>

<template>
   <div>{{getvalue(this.$store.state.output)}}</div>
</template>

<script>
export default {
methods:{
   getvalue(output){
       if(output.constructor == Array){
         re="";
         for(i in output){
             re+=<p>{{i}}</p>;
         }
         return re;
       }
       else if(output.constructor == Object){
           re="";
           for(i in output){
              re+=<p><span>i</span><span>{{output[i]}}</span></p>
           }
          return re;
       }else if(output.constructor == String){
          return <p>{{output}}</p>
       }
   } 
},
...
}
</script>

我知道在react中我可以使用virtualDOM来做到这一点，我应该如何在Vue2.5.11中做类似的事情？

Answer 1

@ceejayoz 是对的。它会遗漏 Vue 的全部要点。

另一个错误是计算值不接受参数。它应该被视为一个值而不是一个函数。

这是在 Vue 中更合适的做事方式。通过使用v-if和v-for。

<template>
    <div>
        <div v-if="getOutputConstructor==Array">
            <p v-for="i in this.$store.state.output" :key="i">{{i}}</p>
        </div>
        <div v-else-if="getOutputConstructor==Object">
            ...
        </div>
        <div v-else-if="getOutputConstructor==String">
            ...
        </div>
    </div>
</template>

<script>
export default {
  computed: {
    getOutputConstructor() {
      const output = this.$store.state.output;
      return output.constructor;
    }
  }
};
</script>

但是..如果您真的想以错误的方式进行操作，请使用v-html