Question

我正在设置一个用于学习的应用程序。在React中，我知道了如何使用JSX，当我在VueJS中编写代码时，我不知道如何在这里使用它。

<template>
    <div>
        <h1>{{this.message}}</h1> <!--Work-->
        <h1>{{this.messageJSX}}</h1> <!--Not working-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
            }
        }
    }
</script>

现在我收到此错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Vue'
    |     property '$options' -> object with constructor 'Object'
    |     property 'router' -> object with constructor 'VueRouter'
    --- property 'app' closes the circle"

谢谢。

Answer 1

messageJSX应该是字符串。

messageJSX: "<span>Hello, JSX!</span>"

为了输出真实的HTML，您将需要使用v-html指令：

<h1 v-html="messageJSX"></h1>

Answer 2

JSX仅用于React，vue.js中没有JSX。他们是不同的

也许这就是您想要的：

<template>
<div>
    <h1>{{message}}</h1> <!--Work-->
    <h1><span v-if="messageJSX">{{messageJSX}}</span></h1> <!--Not working-->
</div>
</template>

<script>
export default {
    name: "test",
    data() {
        return {
            message: "Hello, JSX!", // Work
            messageJSX: 'Hello, JSX!', // Not Working
        }
    }
}
</script>

无需使用this，因为data已与this绑定

Answer 3

我找到了一种无需使用JSX的方法。谢谢大家（：

您知道使用像下面的组件这样的对象的名称吗？

<template>
    <div>
        <h1>{{message}}</h1> <!--Work-->
        <h1>{{messageJSX}}</h1> <!--Not working-->
        <component :is="messageComponent"></component> <!--Work-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
                messageComponent: {
                    template: `<span>Work with all other components, not just span</span>`
                }
            }
        }
    }
</script>

Answer 4

您可以使用this插件v-runtime-template

<template>
  <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>

<script>
  import VRuntimeTemplate from "v-runtime-template";
  import AppMessage from "./AppMessage";

  export default {
    data: () => ({
      name: "Mellow",
      template: `
        <app-message>{{hello}} {{ name }}!</app-message>
      `
    }),
    components: {
      VRuntimeTemplate,
      AppMessage
    },
    computed: {
      hello () {
        return 'Hello'
      }
    }
  };
</script>

如何在VueJS SFC中的数据，计算方法中使用JSX

4 个答案: