Question

我尝试根据我想要的变量类型返回html的部分：

<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>

我知道在反应中我可以使用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

如何在vue2中返回计算机html？

1 个答案: